{"_id":"@material/mwc-menu","_rev":"700-589c0d117381dfdb6bfe6f7f304665fb","name":"@material/mwc-menu","dist-tags":{"latest":"0.27.0","canary":"0.26.0-canary.0af8ade5.0"},"versions":{"0.13.0":{"name":"@material/mwc-menu","version":"0.13.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=5.0.0-canary.a1a0deb3e.0","@material/menu-surface":"=5.0.0-canary.a1a0deb3e.0","@material/mwc-base":"^0.13.0","@material/mwc-list":"^0.13.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"054d0d234704a274e8aaf7d8a8a0399f525914eb","_id":"@material/mwc-menu@0.13.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.20.2/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-kIq9sj19ajn9WyT7ImXODFZluYC1KuE+WQ02nGOEdv+LJf6gjDQS9o+ouz5K8kIOYWIwrc2ONqtBabRNXkAsJw==","shasum":"77d466ae1d147aa32f9bddb151379da4ce130df1","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.13.0.tgz","fileCount":40,"unpackedSize":590314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOPc5CRA9TVsSAnZWagAAk/IP/1/3tlpzgqw2lm0vm07D\n0j2FuKIyb7LZtsQipAH85rkKIJOU5e/Y2f0pynBXn/VkW9STOZ9V8ET3oV4g\n6L2FgZYUvPG+J93ljiIFw1BJBKqATDyyTFtZVcWFOftBFhRuVtXnt9neE097\n/yhnnHIXODy186U+BXSWtCqy7eJU9FYsOOV4YnHWxk9zqC45EZCAwhiBK3fs\nJ6N475XtclUtemGy/+cQMmXBIeMQU5v6E4dAh604/7zRBJKQLi5OhNqm7mYq\nMwJJ+9DSLdj8hrkNPQ3RZzYOou7u7EtaelwIvDByqGa7ifEA90jzSHiBbbin\nFEpRWCrYmlbm6HhmI4fApKo+nzKpTOLhqsOdbQCMoADcryJwu4luc5gOT/U+\n7v+3THhoUOc8QdG5H2we5517sGqDl2GXR6kGnhyPO0O6O5oz2Pd2PJyoqDiz\nUqNjFBz+lrJx413IVWRyNnpYYv5IGsPeeX2tXfqQKCMs8svNKozb+8+P2WIx\nSQYjt7gzjnyRgqixl2mO8MvumBJqXOcItdRW01T71h1ibXLNnzOt46Tiy9lh\nZ77xrh6IF81cOUKt72Qyy6iD1xMDnaYX0sjQY0pgUxmMChIP/KWg3x/wuo21\n9HzlbofKuVHEccogwbcIdGVVh0VSvD7wcS6TTu7D5bzqg+cGrZUAiNyBm2PC\nrBmz\r\n=iM/d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGV8wIbP8KdKJVowLtkaQHdo8zaUZSRPQZUcZGfmfTdoAiEAi+WStIvfe1c6cNZn3aFWoijeGQTabXQHTUNpNKBjHAs="}]},"maintainers":[{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.13.0_1580791609379_0.16735767673702817"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f790f713.0":{"name":"@material/mwc-menu","version":"0.14.0-canary.f790f713.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.781434a92.0","@material/menu-surface":"=6.0.0-canary.781434a92.0","@material/mwc-base":"0.14.0-canary.f790f713.0","@material/mwc-list":"0.14.0-canary.f790f713.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4ccf0f734c9b727a925e62b9999d4380351c7936","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
\n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
\n\n\n```\n\n### Activatable\n\n\n\n```html\n
\n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
\n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
\n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
\n```\n\n### Absolute\n\n\n\n```html\n\n
\n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
\n\n```\n\n### Fixed\n\n\n\n```html\n
\n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
\n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
\n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | ------------------ | -------- |------------\n| `open` | `boolean` | `false` | Whether the menu should open and display.\n| `anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n| `corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n| `quick` | `boolean` | `false` | Whether to skip the opening animation.\n| `absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n| `fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n| `x` | `number\\|null` | `null` | Modifies `left` on the menu. Requires `y` not to be null.\n| `y` | `number\\|null` | `null` | Modifies `top` on the menu. Requires `x` not to be null.\n| `forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n| `defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n| `fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n| `wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n| `innerRole` | `\"menu\"|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n| `multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n| `activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n| `items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n| `index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n| `selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.14.0-canary.f790f713.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Vps68pNXkwXZ49x/2YM4H+dNk9r2jy6RfVLjpRGd8kKx9araDhpP3uxAazQJvv1dTCUxpaZvy+7dBBY7WzgxUw==","shasum":"582d07eea0a33712fcc8c1a24a788487dcabb9c8","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.14.0-canary.f790f713.0.tgz","fileCount":40,"unpackedSize":590398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWHrhCRA9TVsSAnZWagAAW38P/jIem81cv7NPSDZslK8u\nbT/TTU4ljf6eQwDjslKb+zyZKIpVI/ClYl6HbF1+0F4xEAMSDK30FQYgJfSk\ns+GrlW+iXbM5OeHdAYwEk97hoKqSxzbhzoKw9A+vTdR4+jbZrEQCfOyQRkqd\nWdC1FtxN0OMz9tGji0c5QIrEV1i3UjgdtbH/wd+3pqb2REpEr1v4SCHCHp9v\n0mW9nU6+wqI6Yage+NYFh4uwJBnzhGHrObD5AfJxNHFOeOwUCgigl/VFB9r3\nXS1uzOUojuqghHmdw6GDF3LDeJAqTzfZE5d6NpWxWRwx0fUv00/OxKAaNAB5\nHHuKTx6WHkzArdwBCWcafnvJ7NqViLrl6+Zak3DCZIzonFeGKnl+LNeDGeAP\nl+DFgE9NK4l4uROBY4vkzd5obMvybPbvRNW4jhFsD6CfacWuMYTq2oRr9TuK\nPlJN4jDmU3AIzzipTEbOkoMH1Jcttsw3EDpzgbOftOpKGTZIwgXjCCfABHEw\ny04/fPtGkP34H1KQ2eZy0+gWR/PhOKtdhzT/znqB09L9Wkhybmh+klB8122f\nzK2sNJsusvfJtsJMRksNB4sYo/BdZTZDwXmkko6uD4b58ooV2V1U1BH5qrMJ\nu1mZ3tzie7fSjC2U7cnn/Rhbx2iG9cNKfcU+zbXM6mzdC3UgQQjd5lYH/6fP\nBOXF\r\n=L7Eo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAyS4aClN/CcLBI8r+YEwxp6dwf1xd7wVK3mmbe2jDXXAiBM9dSDzgVC6QQDvrr9D2H4/Ahrzi2q1oahjAaTxlyCAw=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.14.0-canary.f790f713.0_1582856929183_0.5230108547272863"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.c759cfbc.0":{"name":"@material/mwc-menu","version":"0.14.0-canary.c759cfbc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.69edc6e28.0","@material/menu-surface":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.c759cfbc.0","@material/mwc-list":"0.14.0-canary.c759cfbc.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e0a8ac49c085c004f390a2995879e67aea1010e7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | ------------------ | -------- |------------\n| `open` | `boolean` | `false` | Whether the menu should open and display.\n| `anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n| `corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n| `quick` | `boolean` | `false` | Whether to skip the opening animation.\n| `absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n| `fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n| `x` | `number\\|null` | `null` | Modifies `left` on the menu. Requires `y` not to be null.\n| `y` | `number\\|null` | `null` | Modifies `top` on the menu. Requires `x` not to be null.\n| `forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n| `defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n| `fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n| `wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n| `innerRole` | `\"menu\"|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n| `multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n| `activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n| `items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n| `index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n| `selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.14.0-canary.c759cfbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-FPEN8If/hZLzGx3YPl+B6FLKhC0vALu0wsfQ3ZeDx9S+BnC4zPQtqeDA8R9LxqOG7b18hQHMru5buYf4UeN7+Q==","shasum":"49b4177104b2e77d6998dec8a70d17ece2d8fa1b","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.14.0-canary.c759cfbc.0.tgz","fileCount":40,"unpackedSize":590398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWarECRA9TVsSAnZWagAAGdwP+gNxyWxvcxfNQHlr8TK2\nMfZWNwFqWSZxs1DfU8hK+tPOSZ330WVLAARsozuTZeKa5I+YdUHqdxDZTkgX\nG2Qk/g3igGla5dsI/R8Qg3mxNehnkhLLbZsVyrg9SSNOUvZc5/cZ5APe7kzV\nY9yjURv9xjJHqMvdESCrhyFz7wOQWSU3I3hWWOZfgpADs8DrHYBk3RchWVjI\nntIpQ5hIeKZFlQkJ1KkBsFHLLL2+/uvmi/HhYQ2yHmoZzDQURAJ36GHZyRGv\nZLZtTxZGVPfqNDKcZomMXqC1srhte9p2cXguxwLSyOEemyz//4dGOuVwjet3\nMIelqDQGLuzoOufJkqhiTR16hJ4c/kJYFOPUS8UZ3KTIfwM6gts84Wm33wEO\n/WF7ksvDMGNTK1DCI866rlZBGSXKphpljj2+h5CRMdzQAVDwYlW61vxzX43I\nnls/r8GTQxjj4ngwE9lEuxOeUOTMbQYIEadogMVAlhbelnHrD3nG88AoLrwq\ngjYeq2aDigvzhedd+tAvU65EtbgtnryeDR1kau99+D2EsLlpqnD77m2QrzT4\nXK2AN536qnc/SAbmZTyANwSiryEkOMv3PAhJO40rni979HqnK2exu1seCaOG\n6swtHwwl57e8ozmfPUzFInC7xyCg5b+jEJ/xR2629WkRvUlejipOMaipj0hN\nQvOB\r\n=D/lV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAL8vvU1EBRDhzGiAy1egHPQALTSFC0d7aJu+fdjMIPbAiACw67jwEaS9mGXvI2priHr/JZN5u9JRkMYKQgfpZaHOA=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.14.0-canary.c759cfbc.0_1582934724011_0.781682940727096"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.97ef53d8.0":{"name":"@material/mwc-menu","version":"0.14.0-canary.97ef53d8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.69edc6e28.0","@material/menu-surface":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.97ef53d8.0","@material/mwc-list":"0.14.0-canary.97ef53d8.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c6865476c6b2c4ccebc9f20145aa8fdf93e1252f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | ------------------ | -------- |------------\n| `open` | `boolean` | `false` | Whether the menu should open and display.\n| `anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n| `corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n| `quick` | `boolean` | `false` | Whether to skip the opening animation.\n| `absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n| `fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n| `x` | `number\\|null` | `null` | Modifies `left` on the menu. Requires `y` not to be null.\n| `y` | `number\\|null` | `null` | Modifies `top` on the menu. Requires `x` not to be null.\n| `forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n| `defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n| `fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n| `wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n| `innerRole` | `\"menu\"|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n| `multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n| `activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n| `items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n| `index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n| `selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.14.0-canary.97ef53d8.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-6x7F//6FLjojYsH4Jt7/UUoZ8wYxw1yHi5Wb/WkO14vPX/Cr04N9I/sIrfbANYXeLjQkwELk/VIV+McOn2sowA==","shasum":"460974f8e47eaa180ec89ffe801c87c57b397be6","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.14.0-canary.97ef53d8.0.tgz","fileCount":40,"unpackedSize":590398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWa3lCRA9TVsSAnZWagAA6i0P/3n8fnAz3mIKq4d284/i\n9XAIiw75kBfessFh3vrD7hBBV6SVvcEuoc41iwUzfUJfk1eUO4qv5DoTFm+z\ne1OtJ5hYekMhJ8UDb3gULm5T4y4xxTQnB9QdtSClcM77epmRJK3Qy95oPDpK\nE9WGJFA+LGBg/jgU5yyY5hnae8pwwHr3N5WgoI5TPsG3lNTb2catQwll5I8w\ny0OLUPe+kTLUj9Qq+X6cY+pokLDEX49JymPVvebs0va9ez6Ay3K5XWvrav+/\nZABT6EE3tAat9aARtB1j7agBW4Z5VEc0jB2t4epYq3UP2XNWsqif39viuvr4\nzH5yaiSONSmxyrb5taIoCsqMRTKk6C6qmK36OP3CKhYP0qi0+9kqOUwf2GQE\n25zJP3YtZRlZTx2k3beOYDUwB4SPjLQBaN5ywskjJaV4zgYcG59y+yYmIIjW\n6pavepsqJGDlOxcHZ6nVRZ/+waNDFkNGNH/bN98dH6wys3DoRDGsJFWsGd+g\nO8AcTC23RQockYEYJSieCV+jyjiFNe3jrRG5Z/kEb9zyGx6i+kDsrQFCVRN8\nkHO06M7rZLPHafH45WwYuUh+Tf8Za6cyMzegLick/1s510LiG6uS0HlMGIJQ\nS+yoy9NpRmOtPphlrU7NmASWWOoacbYXZUTyKmxXR7YCNh7SfdwXKE2+VMFV\nErK/\r\n=Ux97\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEJFxf815R7Hst8OWfQi2baOBCAQjNJP1Rqa+6U8jbOvAiEAtq/fYWH9f93QZ6dXzqv9nv99eyMFQ9QCYG7aPBBIulM="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.14.0-canary.97ef53d8.0_1582935525375_0.7876444190285294"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.24f5fa6e.0":{"name":"@material/mwc-menu","version":"0.14.0-canary.24f5fa6e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.69edc6e28.0","@material/menu-surface":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.24f5fa6e.0","@material/mwc-list":"0.14.0-canary.24f5fa6e.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e884595521a6f82f63b8dec96fc4450410e37a09","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | ------------------ | -------- |------------\n| `open` | `boolean` | `false` | Whether the menu should open and display.\n| `anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n| `corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n| `quick` | `boolean` | `false` | Whether to skip the opening animation.\n| `absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n| `fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n| `x` | `number\\|null` | `null` | Modifies `left` on the menu. Requires `y` not to be null.\n| `y` | `number\\|null` | `null` | Modifies `top` on the menu. Requires `x` not to be null.\n| `forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n| `defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n| `fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n| `wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n| `innerRole` | `\"menu\"|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n| `multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n| `activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n| `items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n| `index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n| `selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.14.0-canary.24f5fa6e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Gl2TdkHjK4x9GJs5+3AskuxCzOUuAjzVuPLXG3GQCO7O6n1Bj9vKAMzRcNuMAOQOGQX3Fvo19hXGbpqZvpNxqg==","shasum":"217855daca420008313220ff7235ff0d8558d3e0","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.14.0-canary.24f5fa6e.0.tgz","fileCount":40,"unpackedSize":590398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWbm3CRA9TVsSAnZWagAACW4P/2yDK+dviMIUM8+4gG6Z\nsnuMARSGB9PXz6VNkfMVA1ucgLn/P0ThqrKvgrM8+ip00bWDCaquCJeFYKfk\n099zF3EthtSgAAneikYPfxth1C5QTvx5XtA1xqMEErHDW3OVx8VQxp/dSQu5\nQmAlvRbRz8nI9RTFg4cOaBVVaQPLN6BMCbA3hwHLamMDNFB2Jup3UwFd8Jsw\ncSoLMtP99UxlNLZOaoYAoy5l9pgqsaN2YwjX9zBmsxMWPj6OIpkFkQdFJddh\nudhbG7DMWGo/SXzwelt+d8vhDBJimLPjC3HxkYfc7TR1d/cE/QxPX8rYwrys\nozw5k/filIbX8CMlp0RRpznqPay3CgCs3AcqMtacaT7kR6bxp7t/A65IsqN8\ny+OVcvBlAQWzIu2YLCtzEFrJXrT9PExm68ndK416NhgM87CH9VM1B26jMbwF\nGYumjplhikqvYdZOthrI3S2Yqlvc3bL999jpQnO9h2EZa42sWiZLtUE/gYCw\na5Zm+rQd77CUP2DBKkQeGW5CpBmOecaQDQzVOroINs99pznGgtjRZdKijyrK\nW267ZzciZtMewtdzkGHoLhOVNAewlFCoCBbWIapLWmeAcLRRf7N8aWRGySwm\nGwMl7CFmeryecMtHc9dF6NGwFXJvhapNVZiXqKDfPh+f9pnI5ZFbnvpZYjR3\nBgsr\r\n=GxUr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAW2/0VG4NevyhLLhkwBEd7/XffC+2cto8y6efSucsDOAiAvhb22ACa13CxlfqsQX1d0l0sxWyxL23XXap7lrQjQ/w=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.14.0-canary.24f5fa6e.0_1582938551378_0.9453861496336082"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.960e214f.0":{"name":"@material/mwc-menu","version":"0.14.0-canary.960e214f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.69edc6e28.0","@material/menu-surface":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.960e214f.0","@material/mwc-list":"0.14.0-canary.960e214f.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c56e2bea6eda03e423f3f7ba00cf95f684660f2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | ------------------ | -------- |------------\n| `open` | `boolean` | `false` | Whether the menu should open and display.\n| `anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n| `corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n| `quick` | `boolean` | `false` | Whether to skip the opening animation.\n| `absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n| `fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n| `x` | `number\\|null` | `null` | Modifies `left` on the menu. Requires `y` not to be null.\n| `y` | `number\\|null` | `null` | Modifies `top` on the menu. Requires `x` not to be null.\n| `forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n| `defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n| `fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n| `wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n| `innerRole` | `\"menu\"|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n| `multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n| `activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n| `items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n| `index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n| `selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.14.0-canary.960e214f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-LQOO96H7ZWzt86TIbim7trNMwwA3tCcaq+YVgLQQSQyM7ugiRDTNEaKf/97PWr9MyYjMj8ul78t/5itCX0YmLw==","shasum":"839a6162a703544f9912c149a5ae8dae8306f8f8","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.14.0-canary.960e214f.0.tgz","fileCount":40,"unpackedSize":590497,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWdXsCRA9TVsSAnZWagAAwDQQAKIAbejMnzL64jJS/N+0\nr2BXT8QJdU53a6GMSKxcwEqw5BZc6AHIGEkN8llPUahlKViMpfLvDu4MWj1N\nZAMepZ/Eagjr+Mzm9ZVR5bZZzKN78+HlZyzW/fsCkmwAv0YxDOcMfE08lrBC\nBoqKY8p9CS0FbZmebuvTcGQx+qjhhgu0Upsz8XtDNir3iDJ20bpTwbBRC3jR\npZpbK4raKmQTvg3rHo1s82/FXePGnzE/CIpd27L+BLpSv7DQaEbEMuL3v7U4\nQhi3Sm7Fb3UD/+CSj3a6MSsttf0BQnkRQZOt4qgpWNhmyhUkMGeD1g1JMoxH\nhWKyL5gGId5TqU2/QJwlpS8ioIgE3Y1YMbSiErsQvHZTIAssWdqcb+O2M/ep\nQ2wHJ/ugCELJeGo4smVyI8xvPVxVeZUD7mWVaO3obpGWSYA99adAeuJ9DjCx\nh3R/TbQ7BAXaU1DaUfoeZb6dUqQMfGedZ8bUYXpCWaWZbcdV7odi7TOsYxyl\nKZHkGnw8zqWnPfIN+cywqMkxd7iciSFsFd6JB0nQBKpHh8rTWQAvBxYS2rfD\nlhg9w9/4sb6wKTMApvoxR3Tlnb0zRecsP463dDcMbya6ORlPuVgKTAZuZivK\nQ0IjGadPkZTnRP+5hZZ33o+oR/RD7OUVjRYIvkFg0wnf9VTEjGeu1MRvG+M9\n2r17\r\n=oq9O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3o5YoDAOaKQdHvZiuHGCJKvv8WMN2aZfPou6uc1685wIgX1NTmkd2fe90iDyZbrGsw8QEQSL/WT8kT7NsVzt6BFc="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.14.0-canary.960e214f.0_1582945771832_0.24917912804659803"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.a2f046f5.0":{"name":"@material/mwc-menu","version":"0.14.0-canary.a2f046f5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.69edc6e28.0","@material/menu-surface":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.a2f046f5.0","@material/mwc-list":"0.14.0-canary.a2f046f5.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b2845ca1286088f29e79c96b6d5c5367873cce11","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | ------------------ | -------- |------------\n| `open` | `boolean` | `false` | Whether the menu should open and display.\n| `anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n| `corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n| `quick` | `boolean` | `false` | Whether to skip the opening animation.\n| `absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n| `fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n| `x` | `number\\|null` | `null` | Modifies `left` on the menu. Requires `y` not to be null.\n| `y` | `number\\|null` | `null` | Modifies `top` on the menu. Requires `x` not to be null.\n| `forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n| `defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n| `fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n| `wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n| `innerRole` | `\"menu\"|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n| `multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n| `activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n| `items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n| `index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n| `selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.14.0-canary.a2f046f5.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-SUSBZMvj7QEf0Ggs0G5fjRS6X1NKN9uaWrKUqEv+1rWEGVCaTKPb5t3gtzAxzG7iIQGFMple6yuLWnBhmJmIPg==","shasum":"356de9bf6d239253b0b98d14848c53c977e3f937","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.14.0-canary.a2f046f5.0.tgz","fileCount":40,"unpackedSize":590488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXatmCRA9TVsSAnZWagAAwBIP/36KrdWjPK+RLS3W965r\ncu1MhxleRb5HAZJs+RptwpbD3IphRTsd7RK1iumA5t5WF7LLeiBPUK31XuJS\n6SbOmeeSeM0fp0dp4tUnEaxO5hU5AbQHfxQWlm2vGhxf4DcnEPADs29ntTmZ\nz50+pDBwC7JBAtHIwIPv7MOH8xdJI8599IMpX3bHxeaYPnDzPC/a8ci2X3rM\nVQkVNqVQJd7IIbm3VmoVa3Rf3qNdJ8r3+KTwB3m08ldObTspCzCg16hOehC9\ngRuqhrD//9Y9Ud62HQRgs+woMYuR5Ia1om/Ol9XgRVyq2g5q7CKrdNY8tL24\nLxrhumR7qmENJF45GtG/q7RzlBGyIyHtwMlIdwXr7Rlv05AqDH7TzCgc3PzN\n0O7sVwKtoHn8fXZmMZ8HS7O7xH7HkeLjMFcr7wskTL7Kv9RRYvDQTQjkIaKV\ncW8UIgrQgXWQbhFzdhEhkw4zDx//59XmpteDuhiL8iw1q40RnqTaG2G69Edj\n5UDbaEj8Qczw19+wl86v6c9nZJQWD9maLicNIS8ygFBrJq5rYZ3uFdx3un4O\n3gceSApMTjPUa/t92SHEchLkOcWyUQIIRqWg6INTUQfA4/SLAyJ015UkZaDx\nWeVnKjJG78EP9daeXIy3YffZFINoVkE5Um9pr9TcTYHIjK3pSySdQ3ggnpMO\nN1Yn\r\n=Z4I3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDePCNUN+koDb7sl9EYmPuTqumXue0fD/3Wl99VL5BqvAIhAPhigELGG4wDdOKWwtWgzMeDdkD+9ZMiHMGieJbnlaIq"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.14.0-canary.a2f046f5.0_1583197030427_0.09070466096214314"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.024f371a.0":{"name":"@material/mwc-menu","version":"0.14.0-canary.024f371a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.69edc6e28.0","@material/menu-surface":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.024f371a.0","@material/mwc-list":"0.14.0-canary.024f371a.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"efde2be2f22a9a7e20f2b0d57c4cddee405ada0b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | ------------------ | -------- |------------\n| `open` | `boolean` | `false` | Whether the menu should open and display.\n| `anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n| `corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n| `quick` | `boolean` | `false` | Whether to skip the opening animation.\n| `absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n| `fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n| `x` | `number\\|null` | `null` | Modifies `left` on the menu. Requires `y` not to be null.\n| `y` | `number\\|null` | `null` | Modifies `top` on the menu. Requires `x` not to be null.\n| `forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n| `defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n| `fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n| `wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n| `innerRole` | `\"menu\"|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n| `multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n| `activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n| `items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n| `index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n| `selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.14.0-canary.024f371a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-l/0V09O1WRexdPrZlZ2BXrZKrXUlP+QYxG/WbMYSBdwLgAu5CwOtXq/J8moX3khyWJuITgV9zr4dARzuhXizIA==","shasum":"b79c6c09b6aebc2eab03d89839c4d195428a1d62","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.14.0-canary.024f371a.0.tgz","fileCount":40,"unpackedSize":590488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXbL0CRA9TVsSAnZWagAAp2gP/jNIaYK8eHX9+0+vgbGY\nCwiIifTT0MRQS/EAXl3xYBHtXjKDYrAa3TUFvgeypg5BrAGsW67O8mvGmSbc\nh7A2CLYZLTbZzJweBjEx0HfuVs1MmMfz3QoF30ZBSqPgr9wQA2ZYBuFCET6d\nxRD1MiG1vpPtjSga4iLWEIhzh/E/mz/EMNu37Xrg3GuQeZ4xsXLPN1cYX+6+\nf4hrKpy8J3z9efDWue1pt01/B2bl6EN59DeXAzrLRNAmJG35CHw4CHwSHyXG\njmbaLn60dCAz0KO1jIvZpTmZyCJTZxWItcclC0/1hDEmUPCkPpFWkLG1GMU/\ncF94b96MjnOqLGcfC6mMzb+0OTDOoEOH3UEpob4BWhOw7LFJI3G6QOJ9JHwv\n6Ot+wmxZCkwdHf+/iOunLVWgyxNitc6GrAsA4j38AceKfRQeXnk8SWcEP8RK\n01MrHaUqXDV5FjYA8NEy/giT+0cN+XHE0Ddwak+HN5M+p3qzOOU/UaCZHxkM\nESUZIXhIbsEU9VevXf19+sH3MXjN0CmC6nz5UBF6FfezUujRHSn6LpH50rrG\n9O+sI9PdIndt9/qpmJJ/EK3paUE5njBxmoyDjYKBjuQz7XGpvRDKi19l9sNW\nzqXeXcI01hGuJVRrN4jK0lyvDL3JquDXUvz6Qa8VjMkTAA3mu0PeBQ1OL+ZC\n5RRf\r\n=Cp8p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCoXT90QwdAxvG+gntiVQPBwnGUzJj9wfWXgm0HFipdXgIhAJEIKuTvd8UAxG4rEQ8pTG6R3oz8gurLehbfhcjyl/IW"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.14.0-canary.024f371a.0_1583198964235_0.77650012072583"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2f164110.0":{"name":"@material/mwc-menu","version":"0.14.0-canary.2f164110.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.9372e4939.0","@material/menu-surface":"=6.0.0-canary.9372e4939.0","@material/mwc-base":"0.14.0-canary.2f164110.0","@material/mwc-list":"0.14.0-canary.2f164110.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"288331a2ec51b59facb4791d01e4d2ba8f4b7cc0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | ------------------ | -------- |------------\n| `open` | `boolean` | `false` | Whether the menu should open and display.\n| `anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n| `corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n| `quick` | `boolean` | `false` | Whether to skip the opening animation.\n| `absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n| `fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n| `x` | `number\\|null` | `null` | Modifies `left` on the menu. Requires `y` not to be null.\n| `y` | `number\\|null` | `null` | Modifies `top` on the menu. Requires `x` not to be null.\n| `forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n| `defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n| `fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n| `wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n| `innerRole` | `\"menu\"|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n| `multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n| `activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n| `items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n| `index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n| `selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.14.0-canary.2f164110.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-jkMB/hZOycjnkFwemM6aeH2t3sYArXZmeC6nZuQqUYkQLheq8OJj9n/KofAaZAFLash27bFGccdtAiy4Abk4Xg==","shasum":"844e31d273218daee69b135ceab226936a092cc8","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.14.0-canary.2f164110.0.tgz","fileCount":40,"unpackedSize":592795,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXs1VCRA9TVsSAnZWagAA7dgP/3CD8g2ZukUo2DHPyxoy\nows0wZXFLPFyUD3RWuFDLf0/HQpIC+IDPFNZFUdsOrFwv76+qVedy5fcF3fV\nRVoRX2eR+SE1ZCY+ioAyPnWpTo5Mhw9SWPB4eGrX26rimogiM+FZvvbApndr\naU4O11gSl/OmhD5DfBo60XMjIRIUR6WuDeKXdhg3TgzrZQMJrR8pQZnaGvck\nlzdgrsMOzOQJietNOCWmJt8Ra/QfgqXrAF2t0krmLVo7rMPpHVtzrfFW/1iU\nHfZnQ0egmZon7iQV7gDeAfjdB66BVn9/rVpGyrpT0F4Uw6B1YKoI861r898F\ngIodcLN8/m+oE4Rk5ocd4trclOjdCAeZbLyfHebKATwhY9gk/rq/FGmB4fFg\n+I00X651RV17+9jXzFQuAkn0DY1tmLbTUk38nnEncDSOusvF9BzavfYTAy5f\nF+vVgt/hUAqBLrI+Ywxb42LWWxI6YqjoMpJl4aDLvqlvlYDJ1wcBU9u39onG\nUno0L3chanGikVxmPVC1Crqevvv8GLR81Pt0ndAFHBzug+JnMQTdvrquZ2UY\nvFTJW+eALDcuW0W7TlaJjZriV+HtSTxJ96iGzk/ZaXvlhsoMEaoOSbdldjQg\nIjeb+8hGOJAyOXZ5+T6LPkzdIBoS4/MjDiCpezw1Uw2dIWTwkf9+nIrR2Kbu\nn81s\r\n=tsS3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDcy4v6vurrxoZhf7lp9np8VXKFGu9HVKEt+pVrMKKKMAiEAnjzZIO0MtxMTStpsRwtayB0ZYItF7vKERdGuG+05sho="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.14.0-canary.2f164110.0_1583271253036_0.4390724458582862"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.edd465cd.0":{"name":"@material/mwc-menu","version":"0.14.0-canary.edd465cd.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.9cf5e9842.0","@material/menu-surface":"=6.0.0-canary.9cf5e9842.0","@material/mwc-base":"0.14.0-canary.edd465cd.0","@material/mwc-list":"0.14.0-canary.edd465cd.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3954ee24dd2fd1d9171cd7a967586e7d2b34ae38","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\n| Name | Type | Default | Description\n| --------------------- | ------------------ | -------- |------------\n| `open` | `boolean` | `false` | Whether the menu should open and display.\n| `anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n| `corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n| `quick` | `boolean` | `false` | Whether to skip the opening animation.\n| `absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n| `fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n| `x` | `number\\|null` | `null` | Modifies `left` on the menu. Requires `y` not to be null.\n| `y` | `number\\|null` | `null` | Modifies `top` on the menu. Requires `x` not to be null.\n| `forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n| `defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n| `fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n| `wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n| `innerRole` | `\"menu\"|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n| `multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n| `activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n| `items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n| `index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n| `selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.14.0-canary.edd465cd.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-If5iMk3qLfCU3nKrpscWAd8AnqI4iaSKCSKjING6dKHuC2XutZHxBLLVM1G+ci8lOJWJxD2SQVfaTT3myjRFPQ==","shasum":"2c46f5b684215eeac5ae6ff798df3650ecdc090e","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.14.0-canary.edd465cd.0.tgz","fileCount":40,"unpackedSize":592795,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXvIeCRA9TVsSAnZWagAAes8P/1gksFXI5LGK2qYV6gPl\nn4VPY8qI41q60ffdULVe5BQiM21n8NeN4GgWdgVTKUXwHNQmz4UG5hFB8+cH\nJ30U1DvzDOFZAxZv1+4gGJyrZ6rABMQ61oSXJfjEkTNMjg1q24ftHdHzE04y\nunRrO5Q3wMGApnLw7ZZkrgqSPEIAB0cgcohaWFHxTbgoPM53Z5AbzAS8MrGK\n+SqnPG/P+VuAMv08Cf/AdHMX+k7xodmrTaWqtjuwW+Tocr3pW8sHzFf/JBgr\nh64fBnwz0khka6ZkUBh9sy5GCSBsNzx9uBtbMoLGPHAP5In3B09jyvyEaTlJ\n9YCsb9A72E6aSdk9g5qFHz1zRv9EsoX2KqwUtaUEJPw4wrb0OVgpFR+kaFop\nLcx7kFuYzM16xUD/6BYA8gSEYKOfzjoFgMryL8zMAMYk9cFULxJFGcB8JK4z\n/96OZaeGsgIm9NVEJAAJ7WZnQJKNzT97demQfZv1HqUWJdTc47O0jfKeZkgs\nTUt8dHFagtiixnY+yvkVa0g1ip+oj2larCrh3NrBhpFQH8+mTOmoOjnzrG7F\njCf4WHPxYHe1lxvxFNEJ8CZs+4hIW7tb0ammV2TVi9kgVzihB89bCD7OLhRX\nLxxZoJSJFExvXv/4SthsVVlveWxv5/nlNHrO+kQbCOmGvO3YgARLF34bcIdK\n2xZW\r\n=J5ya\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCh1/jee/xTkeyZMZu1x5eIOckKhN64UvA2fYPdxQtmQIhAOEiOFaczedIK0WhK+rfeeRIexjCZnQonFXAnBpa/9i+"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.14.0-canary.edd465cd.0_1583280670500_0.8628641946774236"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2b02d017.0":{"name":"@material/mwc-menu","version":"0.14.0-canary.2b02d017.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.9cf5e9842.0","@material/menu-surface":"=6.0.0-canary.9cf5e9842.0","@material/mwc-base":"0.14.0-canary.2b02d017.0","@material/mwc-list":"0.14.0-canary.2b02d017.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2f2999d0bc0326feb2bf856866fd9238c59ca246","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.14.0-canary.2b02d017.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-7+M7AynEm8pwVy0i8SCLL+OxPbv3XZe2Jig6NstpzKD6UQpgyANjP3aWxDmusdndwXatpn+z44NCeD5vCmzEhw==","shasum":"5060828c585de7a09a8f99460f51beb01b4ca10a","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.14.0-canary.2b02d017.0.tgz","fileCount":40,"unpackedSize":594942,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYA1dCRA9TVsSAnZWagAAJvsP/2hkjZlLQ3OVMWYq3Vm/\n82Un/LVjPeB2lKLFUy+tndYcNJ1oGR7E4bFi1wv899WZvinMhq++OXrzUzrl\nQ72mzakZb6tWq/g1EXGtZztJ3Ngw+ng5URP5UOm4RbkWjQHR8rJYDWLfvEbM\n9acTt8uydBXbflr9F9E/+5xKe+IdAkY74ECwN+haG7UAy7z9fSua9qs5H07s\n6c/dPzx5eGVKjFNlnqeX+onO2x0f28BaQWa5eYZpFaKnSEgqoFDL3kZ2WODI\nL6nQA6u/plRJkFe54ma+AlU8seSuU6rzui+y7uOxAz3L1Z/PatG1E8AN5tNx\nYBsK98dH/KmVlrLgQ5wV2QRd187b7xmF+UXBSs1XJHc3E/M9CyTxMV6DHYG3\n22kqUl1rcFcVQRtohJ9xYV1A+sVJktMU3CzZak2lpmL93e2dnXESSncMxCv6\n1c1DIh8yRof4zTB/nk0qPClYwQYtdm+qMEaAIMBSlJQUE51K/MZi88AAZgwR\n33jDrP6KIT8VrwtmuiA5qe2il1bvNPXiRXaDNzadBITf9AQkV8vJ34Kg016l\n/5eagDGPPQdW78b6kJas10W9A2RqhZ/m7DfjO7QJf3UYlxKCBgkw7sI4cH6D\nfdI7z6HOxuDBAW09/Mi+Ttadq5ONoQN2Il2RC4iPgDp7InO8VRkaadsrbYNJ\nJWJy\r\n=JjgZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIATyfdZ7Ivjg/oVLFhytuhDJq7CKhsWrvHurn523x0m8AiABytQn5jCocAUuAjjV4HzkUvS1XvZACyaD61JijKRW2w=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.14.0-canary.2b02d017.0_1583353180489_0.6696788259736344"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.cbdfe453.0":{"name":"@material/mwc-menu","version":"0.14.0-canary.cbdfe453.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.3657f8863.0","@material/menu-surface":"=6.0.0-canary.3657f8863.0","@material/mwc-base":"0.14.0-canary.cbdfe453.0","@material/mwc-list":"0.14.0-canary.cbdfe453.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"473c76376428d49a6811e677bf7e1450ef90b5cb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.14.0-canary.cbdfe453.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-jxHUAuB+0jLiay4hJW67CVUqeH5HOQi7rs0RehIHDK69OUOmcSMQSyB0sR2ctB9bPBvh7Xbs62T3H4LjqiMD0g==","shasum":"fc730f99b93323c156f52c1b2caaecebe379e3e0","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.14.0-canary.cbdfe453.0.tgz","fileCount":40,"unpackedSize":594942,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYCFfCRA9TVsSAnZWagAAnbcP/2A+mJujjaBKHrl95EJg\nOAZRhWAvCdhPqHMSVxWR6lc5L0cABdDwcNReGDKxrU3rSB21RSDatOYFakz+\nRla90r9JlU18vavC0JgJhgdNFw/wzYxRl/Eg/GIoCY4itMjqe3+BZHTBpNp9\n2V7M5KjDFmONl5qmJXyVoBcPWfRf+JuOqKEs+3fsphf7TquS6YFCKklRQepa\nWtF1kYQ0Nabq6CwQCgZDyOT80j7lXpxJj+xhY0zatwISchvGA122qOJerqd8\nmc6C118uIyTr/gK6C8PMEpz06pnqUTN9Lrx20p9p6tGMo3drcr+a5oPLdD55\nko5P8AzYZuFfydOg1O6Jsu557/ekcQUWu6TZr/snxsa2z6L3jAs7HiyVMo51\nz8EINtGGDzgO2JVq9PhLkEliYFfmyr0gfUp///wAkYboK+QTGSZUtr1Cn6oZ\nwSEGG6uVdY4cvgAWrBUEfIyc0tHh0oYvIDz7tjGS3sDMe1wTauPWr1BpOCBU\nVQYfD2zX5NDvd+sTIk8TCwGypEgrFKa6zB14kpQtkfSuBAIJf6MMyCiZ63Ec\nwGUPC1l5O4ytH+0s5mV85JharAkmmvOrE6ucf9zGof3bVNKSMyzmXNNFbb+j\nejmwGJpVunyhm3q+4WoOqZ0O1pQqYQ46Q+g29vnFaw+DFBkhjTcFI3G2EZuR\nM9u2\r\n=WaR8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICvUPy/spRycUpl/bssvAd6D72M/glgkxYi2EM0nc2P7AiEAta0MOe/o1zgMQBCmvOzZY/uPFhpxqH5MqZHvlKsUVjA="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.14.0-canary.cbdfe453.0_1583358303191_0.32197481262127225"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.02aa8a98.0":{"name":"@material/mwc-menu","version":"0.14.0-canary.02aa8a98.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.17b9699c4.0","@material/menu-surface":"=6.0.0-canary.17b9699c4.0","@material/mwc-base":"0.14.0-canary.02aa8a98.0","@material/mwc-list":"0.14.0-canary.02aa8a98.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"97bedf50cad33662f192490eaffe0e04894aa3c1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.14.0-canary.02aa8a98.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-PscPDTA860X3H3RU6eD1kOm9G8t6dWidNNHrIDEdc9JnrglmfNtX/c6OFEtV/lM5SxcBcNQxMZARH9ICzgLeRA==","shasum":"76d2e97776767c54137efbb6062369db48f2c034","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.14.0-canary.02aa8a98.0.tgz","fileCount":40,"unpackedSize":592469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYtR/CRA9TVsSAnZWagAAKTsQAIsWxvXFqeqC/UFfYVgl\najkE0lsQd1CbYlelYRvb6tW4Imh00yjLp3t0sO1JOqMivN0JfrHvafPBTHOV\nOh0aOU932C+/Z3woZtUk6J+ztlvMrc00v1SsnSE06JxPP74T3wlqBgYpg3Lc\n4qtuZT+ANkvT7rP4RCC/vG/1oTFKET2BevRgPb/R9R8qtbWxcNDF1wUAltBX\nRf5/v0xkBMg6nydpaiIcmOOOxv43gpDEUBnTD6bMMzUgxpnXNfqpL8wo9w8I\n2CoOGNWHCDm2foeXdfqZe+EZp/2h1u9bJh2NEKbMxyAsLHnjkWSEZEGq9f+W\nwi37NCsLTkfl1oBFOeCycHVmWEvrE1yEHxxDc+BE2zDCCC0acMKSPnP+gaD1\nHB237cEI0xAq3HtVxt8j/iSvwvgPZPWXYeOcd8MtDdpr2wuDXtt2QO1A+gq3\nshgmyRnsf81G0ZtY0ZDt/q7Nyjz69r3E1ASgRQkOgIk6whxsAHyqsGro3Jh6\nrDP0nQDOEyVrEpDeF92SEbxWSmxIO+cPyhywFPAxDxhModDbZoV/6ObkapmU\nLdY9EuQhvrIsbNRKDIUjYGYl/efNRCRoXm6bSJ2asuip3oMjF9psPW1pfYg/\n9GcEGUdiOGsExmIqxEXI2x6j/dCx5hwKlIoou6rgcszN0Tp7TFxMR6YnwT+l\nRDDo\r\n=FOZa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGGqOSTnMhSnp3qmwegZXU2oJx2frlTxJpO7hYv8fFzAAiAITY0BrqMf0A3vvBZnZGmMfnIvI01sLLPvtAkzexWeQA=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.14.0-canary.02aa8a98.0_1583535230885_0.0303476686067341"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.7cd5aad6.0":{"name":"@material/mwc-menu","version":"0.14.0-canary.7cd5aad6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.17b9699c4.0","@material/menu-surface":"=6.0.0-canary.17b9699c4.0","@material/mwc-base":"0.14.0-canary.7cd5aad6.0","@material/mwc-list":"0.14.0-canary.7cd5aad6.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"02d47be94c90a6674486253c11ed001b63502d73","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.14.0-canary.7cd5aad6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-NIH5xJzviZwQH5SUEdi4ndGodgJ3AdS16AAnOn4jnLdxPjY7UMDvFTOGUTofxM8QjypEdd+jVfD1kvsFLKaSZw==","shasum":"fd6eb998e3eae47969ea4c1cf94c6922556a5e44","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.14.0-canary.7cd5aad6.0.tgz","fileCount":40,"unpackedSize":592469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZs9JCRA9TVsSAnZWagAACaEQAJD+0GuXavHwhxZP9xoN\nlTIiNw0lm3hr4sSZc6SiIQrGrbHFCgD5IsIGTmeGSp013Z6Igb6WXfZ4xf66\nTZ96Ia1BEfjVvpNXSLYYUzQ3I8EviP5aus/9eBBmRlE/Hdkn3aJ9rBF9xjj7\nHPhFDkkR9dCRIWd2vODeNyT5nNVmdQO6U9a3TiRvRVJnQbHvk5Oa5RHckDKT\nR+yg+Rgdyd7deP5Z2gpAR6O64j2HXpEWsQyUglYYc8SBtF20doIJqNATWlTL\n7vkoLjq35zNjfjC7PZSpgHYbjP6GotfE2Mp7Y1CMk/1lnpz4K7nFJInOGhjF\nyYYVWKkMJ//NVbkvmWkFrA7e7kTujyHoZ8cpnVQy1BWKnWBMF216/IbDtwMH\nCKv5sO+6oFewc3HMJhCqQmRgJxZzyDtEZWHidL+ryWofmZ8/3CnrHfeLedoH\ndPNu2WuKpJ8meuDvbmF/DRWee/z/dkkYgYD90eRg45zInnHoeQIRzhgR34ui\nO4gDo123lXnyr/UeltdmbJC3xNsE0/pIGSrjfqXkyiGi8peyDhjCWiU3SzXN\nVxeYB2GWIP1Jg6i2d/VudR9QX8EiqjJehFo4XqkCDI6lzyMSycsvimwyYL65\ncqLkh61sEpmIWp5bOXnF63B7dJd4KgXhiccyHDDvtzHqubFSRbnOlcebrwmN\nHAFQ\r\n=s2vU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSakH2scuAQaJxJ7rLOj0+7UFl0SUxA/iWmjBsHe/eywIgOz3f5f9J6+c79G0G5SrHRqsWgNBAi3wY5ZR3Ui0deQQ="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.14.0-canary.7cd5aad6.0_1583796041410_0.1927796581143193"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.3a79dfa6.0":{"name":"@material/mwc-menu","version":"0.14.0-canary.3a79dfa6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.bd33cb56b.0","@material/menu-surface":"=6.0.0-canary.bd33cb56b.0","@material/mwc-base":"0.14.0-canary.3a79dfa6.0","@material/mwc-list":"0.14.0-canary.3a79dfa6.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d8c4d68989d9c1489104002dc0f43cfb89ad0488","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.14.0-canary.3a79dfa6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-gO93ybDQQnRHQ818jwPwObWt6or0iPueSS4ocj+b3iWUfEXXmpg7g7kDaKfNV1p3CSughgN28ZW9/b2LRnW9TQ==","shasum":"c6e0993c79422d6fc04d086d95f7967c44c70072","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.14.0-canary.3a79dfa6.0.tgz","fileCount":40,"unpackedSize":592469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwHqCRA9TVsSAnZWagAAynUP/jA/A1vI+CwDWuLzKht6\nA+amkEbJaeWWgZhNT91TqJLQ2GfBq2F1izkwUFpbY3Qq3yACQnCIGqd0L/mF\nX3IN1/4sFWJA76mTL8OtIQ4NT35kEbUcMKOJOQIacv9/nUf0oGvprEDVnNJg\nMzWFYJxMrJWLmmW6+KoM6RL84OPak6pEB50RZE/+04VTfku8jSqNT5r6iqDo\ns6uZBftPrx/BsLX+j1h8faFKrJQfaGN4P3DtbEVnjyZuOSCd/2E5h4Fn+AAN\n7ZB+SBvqbnXW93W49kt9JG1Tt5VAk8YJ8Ov599A9QQ6Nenc5y9sFXOZtprXe\n2tWJKoeVnScMhwb2PQkm5ajra0cPPos/B1JvUB8I2lX41+nFlyFSP5HobLOd\nNRmMl51mW52pRSQOndGiCbmTo5XDaJtsu6rqUaQ5WMjh/j8O04q8LuKc4aeJ\ni6nCGaYMSk9GFlXCegjAshnBZFuM8Uj1b90QVuzOUb+cwah5dZ19GzWT/Jd/\nmH9a1h4af1k3wnfSSwXIS0x0RbDGZ8T+ZnnwtPufMeXtIYvG84IiGMOp1Og5\nvISUJQmkFUmdgKP+nCoajIR+++Y2t8WrfFlOsmJNA5PjSXjBRVh1D0QZZvyZ\nwsqVHBsmFq1keJOzYLOMqMUoLRY8YaugyLYyNVt6Q6H0ytKgqePzwefctxRE\nCsRx\r\n=+qWN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIQKtVTt51J65QYFkXHX8zRzZHJZvadzXN3uTS6k1RkgIgYKlLLmCvmNI4KcQoPv7QSDJtYrYEO/Yd4O1gHDFwYao="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.14.0-canary.3a79dfa6.0_1583809002256_0.526428630966413"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.22e0f5c9.0":{"name":"@material/mwc-menu","version":"0.14.0-canary.22e0f5c9.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.bd33cb56b.0","@material/menu-surface":"=6.0.0-canary.bd33cb56b.0","@material/mwc-base":"0.14.0-canary.22e0f5c9.0","@material/mwc-list":"0.14.0-canary.22e0f5c9.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ccb096ae11e367b4590851e53c023abbb22d2774","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.14.0-canary.22e0f5c9.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-YW7soQ2QF8EPk29BspKOyR5DdWuJSgE6DO7IRZvG6Q4wpQR0fN7yKYQcnzK2c8lZoha37W89+GlvXmeRdGFfMQ==","shasum":"05c15001c5d71cf3bc395afb2fabf9aef873d679","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.14.0-canary.22e0f5c9.0.tgz","fileCount":40,"unpackedSize":592583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwLbCRA9TVsSAnZWagAA71MP/3KEZ95C50i6LLlb6SKA\nBG+CBM5WuMdAMzDLDRde5yEO7NbET2GMkhxFbdmEAHP89Y3c2Xr6UPUYTWn1\nTkrSWv4ucIKwNm1rUGEc22wrU9TAzrEZ9qpmgE2376laRbyIQzy5qH7ZWk4U\nnpkPX6CgKY//6HQf37RnXHZnLkybkN9GpEVOtWLc27jMyDSLX14mn6+Hz6IS\nQ2ekDbV9Di+akmiqrSwn47nhptjaHXKQqD9723sNtSbdM+ipJZsLvg7QXD+n\nmhGPOczmjshOTz2ohjBBLqg8E4sjwqzxn485aYEAK0E6OFbsbHjIaBDR81Fk\nXV+oK5siGsAcK0u3GF63/lDLXv/4IFTyHXmNIU9FG/PFAuxrmlN7xni8w0O3\neziM/MjUQ0kxQuHtkMJO79Msn9QndTA+ZFLmhDKZrVQBZhyo8yQGGPFLCA0u\nZSY4+7LuBHwG08qSNmC+9d0Q6cCF/hUTIq1DRCOR32+XtzlacKl+WJA5iKc6\nK03didtfx7aygEi/uWree9ZehkQcqL4yBZyGheMJjLf8m41Rxi8RSoDuMmyf\nItOIceFX2zrA2ZDIuPTbrhrghmVp0DoxJT56JI8EWVWbz8nEkNoGn7CT75sh\nlvjKGW9MCCFJsoXnRdi0wNEsgQX7/YQaYCDqV7rn/g++JhEHu0LTH0Ffxni6\nRcEY\r\n=4PgF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7FiLxM3JmZfMavvtu3HrQcvEez0L5jTuILITDxG+cbQIgK1ovCW0OGPKgfMsnJXkeDdoo8XAfZILDHO8LODvteMc="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.14.0-canary.22e0f5c9.0_1583809243182_0.47676851435905343"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f23a1d1b.0":{"name":"@material/mwc-menu","version":"0.14.0-canary.f23a1d1b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.26c049afa.0","@material/menu-surface":"=6.0.0-canary.26c049afa.0","@material/mwc-base":"0.14.0-canary.f23a1d1b.0","@material/mwc-list":"0.14.0-canary.f23a1d1b.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"625010e9abdb8adc901198fa1ebdc99269b946c4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.14.0-canary.f23a1d1b.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-QpOhlUoEb6HbmdNb2shUHFlmY49wcEDFqP4mrDTx69cTi9ZG1r37KJQsJcatIMCYLnqytQAp7WLqs9ZJuMshYA==","shasum":"b74a95a6b32fabd5f225a28dbc2eaf3bfad05ed9","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.14.0-canary.f23a1d1b.0.tgz","fileCount":40,"unpackedSize":592583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/8cCRA9TVsSAnZWagAAlSYP/AsyrzZhlk3Q4IWmHCev\n1yrEtbvrZCFmRg4emTY9tptbpyjSK/LPnsvX/8keXw6T6tpjShZ+28zc29XP\n8cqDkQd95h49EABf5qhqjS/SiaEMRPlAZZFOhX24QXyDrwF7TP6Ry7pvc4cL\nL9nT0i8dDxHJUS6CiANg6WQRmrASvOcm3+yeX9VhGR3vuWLQqTD0e67AFucW\n6P/mm0Ymy7fJnKf95Jkb5iHwlVUCpYbnPsIv6/f8CgZbdYk3BOmnOPnnR7lo\nA5MHnmkHjli9cjN9SpA31NMsiFUQbWIe/irYIwcKEB6Ma0UOipDq5cD+xxYd\ntij3NiuuE0vXmdWnKMJxLLtxnVgjYfznPze2usIC5u08kQCRd8OyVB0Ojg5z\nCGl6TSEyaeNCT93OC++cJMVKqmZOuff/PcG4DBa3Wc7BC8Rdj4VrV5enCw/T\nzf6FTMbZfTfWsiA04iqvyeFmPlUgT+ZCv6kpjXZtljmtUg3g34lTGN3Iwju5\n/zsLouCRv1DZhkzlKTrGAFhjCEgUAJh/s8ZLX3O17/9dwxwBiaUpiadG0BYu\nxv1wsxDocBOtpsm9Gvbj8p3NjmFMczlliveirej5Hywnm91E4fzlx8baZ7RM\nYc5u+DWcSPyIZcmxdHoCT8zMn6yOQbjp0WmAB8JwF2+i/IXoxEyYLfXdIc6d\ntXbt\r\n=8qq1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC06UQ48PPcr0d19JSGGNokKGWSJwtrs7ygPV4L96zpCgIhAIUZwBxUmCa0ZhFnGWkwHxRTQbzr1dgK0pcfL6UJuFML"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.14.0-canary.f23a1d1b.0_1583873820143_0.5277112252282357"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.34b2d69a.0":{"name":"@material/mwc-menu","version":"0.14.0-canary.34b2d69a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.26c049afa.0","@material/menu-surface":"=6.0.0-canary.26c049afa.0","@material/mwc-base":"0.14.0-canary.34b2d69a.0","@material/mwc-list":"0.14.0-canary.34b2d69a.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b40bf9e324ad010a2ec93cf8677b25b843ad9c46","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.14.0-canary.34b2d69a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-yQGxU1GjjvA4vupQ/tufWbqp17QNSlFWvLTrDxbstPRl0loj3V7kjYXOfAtZ0io+1LZvSBz+mYfV4ediWMhoOQ==","shasum":"7a5052c56ac7e802e50673147bdb59d18a61377e","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.14.0-canary.34b2d69a.0.tgz","fileCount":40,"unpackedSize":592583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaANhCRA9TVsSAnZWagAA/u0P/2BGsY60kQ14GRMGoO7x\niJy8DIgTzxB02+Canssd+hhGvg1jR1Ib2yoaJUt7ihdLn4RzqF+DakD/yL9t\nNbFgSRk5j8MsSo65+169AkhSYY7VQGGQG91qvAc1UwSyzU9ujsEUgHeR7mBS\nsJPGKrH+5oW4HSY80XaHs2lR3rsaqo/2tpctt3m9vPkdJLzo3WLoX4jBJQNE\nl2JWiOMUYuo1ujGW5eilkWFrLDRrcWUWiKVmrGj6SMUvZb0OI6gcPyikpU/N\n4ryRJRijM5gHL90NP7NxrIfcsua0cJJwnnT/BpVVs9QCDuMUxLgOooukGqeb\npnF4w8mqzAWdfKVM3Dxnu0NPFvPNqC6tYs1Db2EolEJ6nJBBHzxsYH89fnZZ\nopLKX7OxOIk/0ku8v0ke6+aHIrkMSPtBP4l+Auqjqui0i2cGAadnWbwyUWwk\nGgt/fB9S27Q16IIwabQVNd2Spu1mpCNyZJWoVm//YQ2woI0R82G0SseJS7fB\nRf4k8wmAjX5KMi+i+dfRb5KeTKhQH0x+fGBUQHBYdEumGfmLqRFdOvCKJBgk\ntjNX7TB7fwgV7t/snZ4HhyVRDSNDy8gxht5HH6aAhwZFi/CM6K5k8zI7rWua\nKPc9AhMxJyhqq39HaGytU0k0rnoG8jEBlCq2gyh88X4n/HvqAyFvwhyBtgdp\nI9MK\r\n=vwMp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCz5H3JseaWsL9G8EWY0CDSul56777EEgAOhIR9lMKNSAIhAJsSJRP/vEcqXWiXFNSJ4CAKSW4xRK96plqSvELNOWe+"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.14.0-canary.34b2d69a.0_1583874913110_0.1360205391750231"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.dc04abe1.0":{"name":"@material/mwc-menu","version":"0.14.0-canary.dc04abe1.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.1db5c9fc8.0","@material/menu-surface":"=6.0.0-canary.1db5c9fc8.0","@material/mwc-base":"0.14.0-canary.dc04abe1.0","@material/mwc-list":"0.14.0-canary.dc04abe1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"83603c5af2141bb893dc17dc4ff73baa5dbc7b64","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.14.0-canary.dc04abe1.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-HyheLjNhFCJ3WYvWuDhraUaE18riemaI+HQT16zaTvWUjeMsCHmsQvxCqu4GrHvxkVtFj0Qp+E9ffgIwwwh7cg==","shasum":"df015f65b8efce935ce5a6873562ff9084df64c8","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.14.0-canary.dc04abe1.0.tgz","fileCount":40,"unpackedSize":592583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaA6HCRA9TVsSAnZWagAAB0UP/0gcRKwK9px4vkr5H/+E\neaK3iL85To5p5VxXClYdTWGku8KAunqcjp6c8GxL8UeeLVeU1HrxU+4NTKFe\nnDrbGFCbhyZVI95SXuiU2j78sxg5E1SnDCIuXZUDN/q1IdXV1+VgdSClNzSv\nClkIB+FdplCuFxdr+tHfUYh3QzWjwz5s9Ak9b9o/RbvS0qMQy0Jc8vpwjoIP\n+LC26amvjeQK5l2T2hFCvHt2zD6OV+M3m8yPJ344OEG5VQFeNLJx59eUFZxI\nI0dU5rfO+nC5TU3ZUGSJj5eURTg+4fWN3lCdOAJoZjr0UuS6lmbIjNssc730\ng+UVnZJKKOgYfFvDzDz7xy5gKESf4VL9jA2jsKNkOnrQi5SC4/9cthGwdhtp\nrjt9zEZeLdW/KNur2/s1RIxq8a6fEPrvtqvKQYXEZlsA7Awe0RHRbNhca538\nrIS/G7mhRbPB+6VD+WMACwy9o8WEYGJn48m85wNgjOjxwp69LZ6CxSZBPNIo\nSfwCFxMrycq5itop/B94ggp9U9bq+DLBz/HNvnF73Ve2HKWrLPpIPiDJBIw0\nKBe+0nxXEzFdMxq2lxg1t/QYoonWFP5YBQj+W1IlztP/BpMd7yFYVUvaMyGx\nX/0kRbX+iU8WIpq+4aX6UK2O3zWyBYuTqlyhCcwANvOnDLZL6z3VZfJlOHkQ\nrR/A\r\n=BZ+s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDgXemyt8Ku1bZGIws7vG9YbA35XwDeRUH/8ESze5VV2AiEAoRYxrJmFDYkCufJtceyYAgEz7eKMaWoCs6dWAfdJ0XI="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.14.0-canary.dc04abe1.0_1583877766673_0.7624893677887195"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.04ccbc88.0":{"name":"@material/mwc-menu","version":"0.14.0-canary.04ccbc88.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.1ae8130ce.0","@material/menu-surface":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.04ccbc88.0","@material/mwc-list":"0.14.0-canary.04ccbc88.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bfcaa800a510585165a925b6961a7e6316f30f57","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.14.0-canary.04ccbc88.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-SFJou1nVfFIQj+bdPTNmL7t+hFkP58oYJ3V49GpGgty0N8vVdWKzlkNzXIjF/DOxw/KN8W/M2+o7HcDPKC62KA==","shasum":"e1514ca8fc9f6b96ec4859a9288a9f33a4d97d5c","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.14.0-canary.04ccbc88.0.tgz","fileCount":40,"unpackedSize":592583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaDJHCRA9TVsSAnZWagAAriUP/imRoT6RCLX0O/evBVjT\nGY8VBhkJIxQuSWUT43VuoBJpU7/E412hg17ufqd/a1zxmYjpvs0dv0WqhCOH\nd43zh4pFnjqsQUZX3zMfimog2Qml0dtI9xyAM577FCG7QqGs0MP28djrZ7Zt\njrosNgSUSpFWznu/c29YDcqgWenN8mS724SV+vobNEIlQvb1LxLmkhAMiSHR\nI4/JfObzOLnSDTgC/aMR5TD2wen4EwVgUm9MivxQt7dFfK32qqn28wEAPY1A\nfdr61Fruqs0XbA4oCZiis3H3jjKudKuECRO/ngOksVNGm3IMiVRFEJ0pyDQw\n0JhJo/4zw1CFnJ/p9VBXCx6JRztsPGJNK0qGqBYwoaBQOCkdtmJmll/fQEXo\n+yMpz7dZk4ZL68y6CtmXA12dgBThfYY/S0v48d00bLvYR9KY3FPGequtW3Or\n7QmDhJArsvoCOmiphl2qsy9mtXFQG7CCNwwPysthHA9zklKyFDMX5KhiMBXq\nxjWv8otM3WZyFJOEObWd11HEF5cVJjhf7mQPoLy5MS5YTIU4dOTzBmyvzeOO\nKesjAiRwbVjISgUZCzBJd0GLBcWtD0Lb+bAfvEV51rvoVzchdc1KgGs87H2L\nQRhdKHXhv3kFQ9tu5gPxHOcB0Y0db6SZOpR3mxwmMCGj2C+7PXmTlD2alz6w\nwVQc\r\n=gmf1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEd/FVuMdM6lNMo/VCxbKANiIpWzsRQJBY0dxpIalPDyAiEAyc1vteQJVdl+fA9FVfjU2mN10e/sGngut24zKHExNbA="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.14.0-canary.04ccbc88.0_1583886919135_0.48644960915501145"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.55338c25.0":{"name":"@material/mwc-menu","version":"0.14.0-canary.55338c25.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.1ae8130ce.0","@material/menu-surface":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.55338c25.0","@material/mwc-list":"0.14.0-canary.55338c25.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6251bd82d8c2b37985e6a165d6904180ec7a96e3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.14.0-canary.55338c25.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Sv76epxslMsKgJ8mpqIcYAw0DQslwWKctU6Jn1Vq0y3MZsikRCFImgjvd65/hPSnwVV6PZwKUXlqBTC4ttUrcQ==","shasum":"2f98eb75a91bc1d5f2af5e349762506aa27f8ca7","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.14.0-canary.55338c25.0.tgz","fileCount":40,"unpackedSize":592583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIXeCRA9TVsSAnZWagAA1NAP/18wfMfuqkEUCAyYowvH\n3oJU+0FKlHETpipTzf4SSwz36oEmCZKNajJA9v7cLNRQFC2m0cI+FgIEdmNv\nS3qp8XAlqqQgZQ+mKBpPtZaE/kC9K0QBgKl2Vo+FUsYMEXoo7Os3HeESrCwz\nQGJWB5kzLQLIJpGA9EsprabTGuXMwcATwxby3C9KvUwgJvNg0etqMxUpG5qc\nuazkVyAWAADunTpkyC1iYnZ7dkLBDKRYcGUh7iwqaffIHEOfdpNccDnkoTdR\nh1dIMOxhTAhXAZ+pl13qwshBGvLwEx0FuSC8o/fTW1/pEsoOV0q5njyEKykB\nnASVq3RO0dDdaO4TET9c80AdOJFUJ2XLN+vW5OyJPsa1RRUoGh+aS2gEjozF\n+JgmOKH2j1UCR/Bd+DwtUjxbbBsPQii0qIB+mdM/AFM8VKEPKMgtZ4SCdIDu\nJlJE4YB5EjRbhll5HRauo/gn6HwsyX9nafltNvmY8GkT6YP9FlP0pbEamOVD\nPpOLH/NRoNv/GOLAp8jTKmJWbgLZ1eBpyIDaCkS/aH7L6vLZY81GhGWt850r\noMRjAa7CrYEbyElotGv2VJ89WwybYQzfpZEeamahpqYZ3LNpTOj7hEu1iUiw\nYyQxXk0d0rFx3BPD18p1P+DH7UqdFlFnY1VkBkemCscTPsqkEPGCiU1OUjSe\nmzzP\r\n=N5fF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIECoSfIyQwtwd8UKdCH2GgJF6VrGoQkcY2+jBDgrt0IdAiEApX1drPslR5C9mbbKk3sNvFZpqSeHptjd4EcO9nq5xJk="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.14.0-canary.55338c25.0_1583908318194_0.3911852681376631"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b7e388f3.0":{"name":"@material/mwc-menu","version":"0.14.0-canary.b7e388f3.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.1ae8130ce.0","@material/menu-surface":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.b7e388f3.0","@material/mwc-list":"0.14.0-canary.b7e388f3.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1ce172712209d5abf28a65e797f46fdddb7ea704","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.14.0-canary.b7e388f3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-RdL9HoOqlpFlhJ4gbH2bUEzaQeYIP0EkdNpaTmYNjaGF80tPNXw0Ejxf8v8RrreBTZvyvmF0MOtfS/NIfh/fBA==","shasum":"a0ae315052dafdb15cccab9573187902f04661ee","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.14.0-canary.b7e388f3.0.tgz","fileCount":40,"unpackedSize":592583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUf7CRA9TVsSAnZWagAAhPgP/jBgi7IDCcFEdi17xuUv\nbJb9YknmcDyempaxMfeEjgT2vORjpmMdpcWgKDwUyUiufQicMefNwPeT7eZ3\nIRFlo5KDTCFioeWzM1TjWcGpyeHXkoTj35T821EVB+dOc/PqO9z8tRk6tju6\nEVlX3iymKPFhFL0hUKUnWUoahY7huv11ZK/F/hiN92HZ+wVv9mAY0M1wTGVM\nJzfolJHXlpUwRxHOP+lNiduV/gRz3nia41IglW5e/0i/YGmxA1FbvzqpMCjh\nqqgpjrX5JOHTG5dl9qKOGQD/NAzfmtOcg2YDeucwyfux3kEiKOyFGTYr7IyT\n4sQ2vb5suPDiwxGvzx9CkcgjKQwsqyuqfXtjfBDMyhco3Fn3HdvefbxfjKV2\nDj65Hw9RzJSgoFp323/1He54K/vEsGrSTLGqlJR2LxmD3PzYFjw88QNAD9KO\n1dWR/VrPxxJewvJbpn7PfBRznw6wpmMQaw8ek5eguJDdVnuTJNaxLcKNsD3/\nH1beQJxcQFC3Z4wrVkmFdowqXWvAmg1lX9tUu7zULN3prhZkY1GpBrZcJUt9\nc7nJXIUDqKH54NYmBRhQ813YefSf+Fh3XdbiKk+T3uCJ6yIVp/vbB/LyQrtW\nu+/rSuDxjw5vEBTMHZyiKQnIZsWlmUe9jmRnlnMBN/Tz3oR4tlqRdGjEMt7C\nOeDM\r\n=3Ilz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFtr6La6OqjLPNCzhorfRPZOmjvusx8gH7gMUggV4kh3AiBb9pETpHd3SZzStIbnWYXa6IY0x0BC607LwlCtz6LlGQ=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.14.0-canary.b7e388f3.0_1583958011347_0.6852791734503825"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b3211481.0":{"name":"@material/mwc-menu","version":"0.14.0-canary.b3211481.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.1ae8130ce.0","@material/menu-surface":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.b3211481.0","@material/mwc-list":"0.14.0-canary.b3211481.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b6c73b4ab63cb7701379685a556ece3324d1c22","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.14.0-canary.b3211481.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-KKWK836O4eu3glGW8KfWV+x/sadpTsUJnCfBPYr5ElsQoTbLO+qM4IHV5AywF45LdvRfNwWJvqkcAeWA1KlJBQ==","shasum":"6bb199d0e67a9cb0fb68c3a7e8e9297393052aeb","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.14.0-canary.b3211481.0.tgz","fileCount":40,"unpackedSize":592583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUj4CRA9TVsSAnZWagAASYgP/RhKP2ByXYX6UtHvRGvB\nJKljSZn2w/822+W+STHJewBQ4SufCScPZxIp6L/ARaMusKKF5K8cUipT507N\nQqD1RF2x4fJzwn4Iac73pOAWRc/5f/rN6JXWlhodWbwgLqG3E9BJ2BtqmzsJ\nZ3+ka0HOXZE/dShHBWc0h4TlGhoLCcwnJvzhhN2OokFwR0VtBPfv9DJXrRVv\n7z/SSZ2+wZCDMLSZPy9ceoeLcSuVjy67AZ8YrBzo4cHt0Kqy+CtQJd+3M4El\nCGHFU4xGn+rClPZyUhiXu1dYH0gBMOPma214gcLJFnQzrgSSJ3ZR0mzQspo9\nRd3SgiPeDoCeaPeakzmOL3vBD44OVQuwXKj/4L1jtFPvOLeol6iZtPnpMdpt\nEIVHkTKgE2jmgZOcXakJyibiYAMci8EhpZiJzpiEHHjQiIdyhcnpZQ3+mMGj\noHDVFy9YuDdQT7q8PxfSB4XJ39a+AI9x/pMaipurZp1tZlHhk7e/rddKcAAE\neJeMKkrjs33qedLDFwAWm41FlucwM1KyBOGqvdW72cRfb4Fie3tDxrd/BzwE\n9EGnZop/EPcWwgPHf07fpSZb6oAlmCGQh+TCep6UKr4UDH3JX5cLtF5gPeHL\nsCWb6ejDW7Ygv9AQIJ7vr3XutZpModkUjJmewM3LwWHhMXc+oxiI7VWoWDny\nyoDB\r\n=sFm/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID3Svr9Noi3BiMZAAjNf41Ca+L7/cwCKCmwJKPEKGHWYAiBmQdbXlCSXJ44bVKLewCe0Cny4GWHX3+R8zUU7jvfoxA=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.14.0-canary.b3211481.0_1583958264207_0.010968809730413254"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.0b5c7f23.0":{"name":"@material/mwc-menu","version":"0.14.0-canary.0b5c7f23.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.d5808057f.0","@material/menu-surface":"=6.0.0-canary.d5808057f.0","@material/mwc-base":"0.14.0-canary.0b5c7f23.0","@material/mwc-list":"0.14.0-canary.0b5c7f23.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c142ca8fe1db14da6fd164a99ca71277489f9b16","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.14.0-canary.0b5c7f23.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-bNkHAjvLSN77/lhnytL1Foca+NOsyDk/sinReFT8NKsaYP46PaJvH5qWAQl3uCIHmhIimWH2Hy6/+LSZpBJtJg==","shasum":"1dc67da3e88cecbbfae6faa8c1436b031ca4ae93","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.14.0-canary.0b5c7f23.0.tgz","fileCount":40,"unpackedSize":592583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaV4KCRA9TVsSAnZWagAAuFUP/Rvl35tbtBeqR3/n55Kl\n7MnMVawE3kgacoHrVyJDIt3hHZL1T4cFc442iwfYlJLiP+7a61ohnpHh4KLe\natu/+6ASZPgqUoX5Q3+nJ8A+GXZuQ/7em3k8FMJuQqaxC236zHIkd2bY8gqc\nt1pWLlSVRcR1Gmps1YTBm4VYXbynL6du5TQpeSPsv+4hukzlTCUt7TN65cl9\nbU34AsxkUZYqVvEMKmaJOwrM0HlG2BxBpATR3z3VmqQ0I7NxLugUV0wYM4S1\n6gGhAZcvU68zjlU0pU23SXzyonfkWXXvRyZMzMAKhvX9xLCWVabcausIlbpd\nBasbdQ4TzVwXDH7/bZMt35TNQBcJX3xuTZPx2z2hSOiaBoReGK5xzX/4nccD\nHYq5BncBlF73qMN5++ocG7iAQ2t8Cov/HiHBPbIqmj+oQYqBaZC5Of5D2O3g\n3b3AnTZKrSEbMc3iAV1Tu0NRZ2c1w8gTWKvR5Pgf1QunupzJ2aW7jZ3/ruKH\ncsrkRZBaaYFDI4LADpaNeVcZnwYGeVHz2XpChxpgipvB9DSM6i5ETF3znXyX\nLZfIebNiTeEQrVt/wzyK3m9CN8CB/AB4xPmsv8e9Okg+ToFR7PKImiFGzDF8\n8BAC4K3dTxSS9goAMjl4ND1tNiclwusaWPoht8zMuBGajkiCxlYyiwQwUPRK\nOm2O\r\n=kv36\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLMFbfjQvAd+GMeukhANIBxDrDR0ks7pj5eJCHVYpwowIhANzMTEhBJEqztPUR4w+cojzCDE0++7HFxypT2KxiWHZE"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.14.0-canary.0b5c7f23.0_1583963658140_0.5554036265624371"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.6c0f0b27.0":{"name":"@material/mwc-menu","version":"0.14.0-canary.6c0f0b27.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.bec065920.0","@material/menu-surface":"=6.0.0-canary.bec065920.0","@material/mwc-base":"0.14.0-canary.6c0f0b27.0","@material/mwc-list":"0.14.0-canary.6c0f0b27.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"642e3027b591cf821c0ef159a9bd31f56677de91","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.14.0-canary.6c0f0b27.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-cMhy+jv4KS7xie1KPV+B0f4l7ItFse1mSg+lDhvjKSD+jl5/Jc9MyPF/zqs3msrwgTuQNGNZujsR8iS3Ta9rmg==","shasum":"e5ee074d7cf4c24afcfc45587c965141a39ba946","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.14.0-canary.6c0f0b27.0.tgz","fileCount":40,"unpackedSize":592583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaqb0CRA9TVsSAnZWagAAIqAQAIOc1yAJW7nWR2wpeeeH\n8I5SBgvS5YsN2Bqz1VsQ1KlfFWhME+mv03DfhG3OxaywVFi1bF/nnHVwyGvU\no85KU+1mfYdziv2hBFXQ4Yk8TmISQ/a7vACkK3H4cKlVT/R9wfX7715ty/In\n2XV66yUDFBiVARTwGC+SvDNCBrvTAMLCvyXt70DBLv9YmC1dUYVjFx5Wj2zU\n7FRDdStOOIHCik4Xtx4fN0/wcNBCXchZfYra7QT30WEFAMa2iIR+owDyjzuT\nXk2FYql7dtwX8sZucJ2HBh7Yw/Hs8A985UgUNqu8BwFSqMXzMji6N8KxUGuV\nadHFJgSf1COWMvQ3OmVK1cgblBHqS9X49vAnYPVYfFaU+kWep1vYhCpE+Rt/\nWWXKzECCFSHIUHavtC2IZZpwvjCugLQ6jEYBOPjR264B3imYsa1Qbrs1mM+q\nf22xmPFAk8SMFqlWkPvsrkQtSzoma1A7gIGUCfGP2lQIF/+DtR0+QyeMNcek\nld6lQaPkcceMSh+lUMEO5lG6ieox7gkrwdsMiG4lX4IoAh4NNTuA8tMSOaar\ngz7Uhg9Y4xYk8zmkE2lnui+SVz84SKzqCBs9Q5tY3n6VxDYuBQNkdqPBNUm0\nOO6ekCl6jN8lsQNrZ0i2Onw9WOFx8xgb7KCW1FBDKb0pbIy4IyBs48Dzaduf\nFksh\r\n=m0mp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8f6nh1CF7M2iIE5/Tqxz4gNrpwJ0bGwBUAc3gttBc7QIgI/hhYmlyw5huXw5KWHF72HDB32O3U0mtPT/T9fkXQhI="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.14.0-canary.6c0f0b27.0_1584047860368_0.5621006623689391"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b6c53425.0":{"name":"@material/mwc-menu","version":"0.14.0-canary.b6c53425.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.bec065920.0","@material/menu-surface":"=6.0.0-canary.bec065920.0","@material/mwc-base":"0.14.0-canary.b6c53425.0","@material/mwc-list":"0.14.0-canary.b6c53425.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"21e9310c19b1139fef9125fef8610235d0ef0e4b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.14.0-canary.b6c53425.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-wBU5y0WQ1SMd507WNlN79QxkXIOIRVO1OUh6pRvDhQs4FAXOl28zYmP4iL6U39j4iElJlrBzqSlm/UihGXZfgA==","shasum":"9daadc4748d73b2d0dad71d7a183b347003ee484","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.14.0-canary.b6c53425.0.tgz","fileCount":40,"unpackedSize":592583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJea7sTCRA9TVsSAnZWagAA9uYP/iEOTblbM1s43S2U+qEy\nWm3qecK2v1H9elpSqtCkmHhiOHdljvioxwpMKPQGuwDRh68bruPArWN4arFH\n/GjxmE7yB6chSdj9yshxuprVB35sSyrP2PTXRz+gdof0H8kbJR/oEaG4IrM0\n+h60qnYiNtJIGjMnJQXsW2Iix54TZl46M415ZHKGh8V+kBeHT194OSNfju3i\nR8poD8HYDHdp/b7qZtQQdGENTL+9WSIbeGsvpt/2BuSm9sa/8qDBXtYae7+E\nvmac58RXqoBCrvQKkUMu/Ma6w7goUUVXtpJKcPW2NLFOu2A7HBK39AXpsyd6\niQyOewWxYNj7XxVFAWyFFKYTpomxDdApIfl0p71rvrmpd2wXgtfzeBeEn+in\nbqC5EG5430J2VS9zGGiTHc587GPhAFg9mo9PadnHZaTNeyYdo+VtvplYuqFB\nu3mnVc/3vBr6PgkP/SxWW+ym6PuQG1M8w2YwU445wgNmbgCbnh9JzQSLYStd\ntfeskNszBCLCT6kgR2MDrVUmcyMO2TDO42hn2CSy1cVscwbQ+vWsOc6CaBQ7\nQQ50zWjkAAdjeUEjPG8bKfZPu8PWyLNMzQopcN26ypNAgUQrL3S08KHYyEtW\n6GYrst0yNTri6yxRARJmCCzyDUdRHpnU1UmoQIzgiv52jkSuaaUwjA1VwuIX\noF8H\r\n=8VhJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0Cxu7OuNZdInU4xvfWm4bhAtZq9aoYIwwKEaN2570uwIhAM735DRdOEsvPOMiKTHB5LUX17rqYjbA3keNRC3zN0ym"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.14.0-canary.b6c53425.0_1584118545180_0.3887143419290586"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.306cabed.0":{"name":"@material/mwc-menu","version":"0.14.0-canary.306cabed.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.bec065920.0","@material/menu-surface":"=6.0.0-canary.bec065920.0","@material/mwc-base":"0.14.0-canary.306cabed.0","@material/mwc-list":"0.14.0-canary.306cabed.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b07db227ed0e98a8a55068a9460e3969aa14b37","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.14.0-canary.306cabed.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-02Q/Nx4D1ssKbO9pmKQYHqmSzbEly2Fwj6G+MjXwQ8WBFA/IpAbUV1ob7Io6p/S7HrSicJ7abEPVNX0V0ueTGA==","shasum":"8ad5393f85280bc04e50ceac472d0e867564f1dc","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.14.0-canary.306cabed.0.tgz","fileCount":40,"unpackedSize":592937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecT6QCRA9TVsSAnZWagAAXaUP/RbS+GWfXwwLFzvvsJcT\nipdGFKWteDFS2VfymSLLfSE3qhuT3ZjnVCQNQ56QiEMTI94YewMXxpU7jKp8\nNsl3HjM2vBt1M2sSYFH7GOu3Ob8vTqN4xXjwrBrEbAeNYqD+9qfBmk2Kkojn\nHW4lvqQEJ1enn1BPHS7qzApvqdh/UHuL/rtFkERAq3zxSuidffrNjoY2ausy\nUISzeAc++bPKqehIDzRGfqLXGUH5TMI0M8Y/zfaAV9za4V4q74Qr0WAP9jPK\nOWoLUpepXZEVEHKul+G7h/J7dwAs8tyUo+Z9gh8n0WDzm/B/GH7HzB0Yvbgg\n3wBfiMocH0wgHoUl1mH6pcneVcIemcYegrMM9pA6OcnstP086rfKyhk0f8LZ\nukkn5Jksp5t8o353RPxs4ZVyaU2Wf0yX+ewhoRbx8+cYEsGT7WUJDGFnbRJm\nsEFfuwcFeFHkU1oCOjof98Qn8ttImIsNPN2CoZUkzLd9BQsiln0c6DpLHr03\n4vS1FCNRYpon2jV/6qx2BSj8YCAdBnaqh+FdlHnQW6+ABlOmV9k2A5ulENUx\n+uJBSmrKX3uhq8FbxfWLlJqVMwoJVdU8fQf2iQKJppeNCz+vO5qxy+2xz99Q\nOLF9+zO3YQWhI9E9/2ZZpa/EwO9wBphooi8+P9Pt/l8acyNny1hPWGabtgjF\nsI/c\r\n=WZGH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAvxvvv7q72bSB94KHDClwGR3ung3caBcDPekBg/N6pqAiEAteyoKm+lm43NiTHVVu2t6QD4Jg9hQGRfluW7gxrBpho="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.14.0-canary.306cabed.0_1584479888432_0.7292540738318072"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.4e250cbc.0":{"name":"@material/mwc-menu","version":"0.14.0-canary.4e250cbc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.776291ef0.0","@material/menu-surface":"=6.0.0-canary.776291ef0.0","@material/mwc-base":"0.14.0-canary.4e250cbc.0","@material/mwc-list":"0.14.0-canary.4e250cbc.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8e0b10a13a5b20d13409bc4bec6f11a4ff757663","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.14.0-canary.4e250cbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-KSQWr2wapbiWWuQ2T1oSUR+VsD7nfcnUKamlktE4LQ3sz42mNn/gL/ed1LBAiu0j5Z8Bs5dL78Xv8i/yHl7U5g==","shasum":"1726a4ae7e9d359042beecc299cedce46c69eb4c","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.14.0-canary.4e250cbc.0.tgz","fileCount":40,"unpackedSize":592937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecUABCRA9TVsSAnZWagAAzWkP/A1p1G2ZGpUJQNG7uOuf\n10NDrMRCC/bz27EhC+4mxMh72JqlLy0UWJW6pVCb8fRjWuoDm+IQLJ4+RD+Z\nfGO21P3ie8EwQpl9/T4I3pryEPfDxbK8WmBTYjB/fX4Mx4EFsnj/HFTUAI3q\nbnrknms14KkuDVbVY6qHy0kWQbzKcO1REYM9gJzp1LcY6qojxM/UYKh4Ufbn\nh4vQKSZKeppETZb65i9vFHN6j8vsiGKq9wW/6g8BT0YUkPLRoO8B68TjtPSf\nu+aGa0OqKZjGJxbm2h3xpAGj4gWHD+JwucqN6X+vhzk+oto5EWuAKHxKcf85\n5kVTMFgYG+eb0At2GXl/w1s/rw2PttxRmLMdmojYdNWrV3XdrU9G5ec5OCMi\nkGJFRC752gUWxfA9B5/J73mMlKIXIN+Tja7CrFTTPseSTZuzzQstCw5fdBdX\nN4fqEBE5ZiI8KHHKJKotzpbpVh6tuqku/Bb8d1Z4O53n6t0ZemmnHfDIppHY\nNy2ySlcE8IjAMWqw40P1T+LtbF3kQqwuDREDXE2UbVI9L3q09FbpH4IWPVaw\n9w3pAQIFS0VyL6ZMkuwoE6d/MaGiQtrWKRS905n3r/JnIHEbTK7FxMydwS+W\nTceA6fejdidR51w2/653Q33G9odgNCve/qGldUZGQ9QDBJaWqRizV9+Ri0QZ\nkpMI\r\n=Kc4j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB+yNLgPorD017k6pUdmChusoT1+tdehnKRzQNKEpDFOAiBf6wydWA/Td6yiV2/lkZW+I1gBClTOhzkJw+sW52RkjQ=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.14.0-canary.4e250cbc.0_1584480257227_0.9260599215960836"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.ff82d9ec.0":{"name":"@material/mwc-menu","version":"0.14.0-canary.ff82d9ec.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.6b48781bf.0","@material/menu-surface":"=6.0.0-canary.6b48781bf.0","@material/mwc-base":"0.14.0-canary.ff82d9ec.0","@material/mwc-list":"0.14.0-canary.ff82d9ec.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0af402cd2ff3748cfa5f7956ad2211ec9271c83e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.14.0-canary.ff82d9ec.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-hJtD7ZFUdU23TSSfAz77DfVBM99jNDL7RfEgdXn6ONQwrFchK2o7/JbKeAI1mxAbF/abYVvM7ZjEzGGJgz50FA==","shasum":"75d26df6a9f8e31b7b60a629813090c433d3c386","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.14.0-canary.ff82d9ec.0.tgz","fileCount":40,"unpackedSize":592937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecmZpCRA9TVsSAnZWagAA7ZQP/R1dxmJjDM5DSJvtkD/s\nd50gwcUwNZXeIPSfIiWLxJ9OPUsx5/3urdZrbFKXe+I4j47BiQnkharvFwSa\njXCVVn0RFzDIdIZrUJoDIAhz27YLVx2UNjhNbFkCZ8w/RJ2y2K6I80/CAW90\n7uUml4S5HYgbifF4TpILaietnPkZ3cSNC/Y4CqwlslvdL8V06LDpxqmBfmo9\nhh7pm7BLmQ902FwOSz3CqRXFveFTEXou+D9a68atr4Ni9Ybf5gAwB4HgEiNm\nvEPVjMbYpqVrZ238OG+v5ev/TZy78WNMpC7NLXVIzQNgaU6iVnASPv7c7D1m\n7ZKZvSD2GfEsswO/AoBk6kvlNmym2Txzip3NbPwoPVcRSJYRfBiB//y7Jtyg\n8IVyuxZx9xxEmSVgYtfyF5dcjvA/r2p3Mx4zkBe2LOrnql2MA5kgBhEqL+vc\nUj6vTok86U0JHEXpbdbEKg7AsJlJY9Fu6mRX+3LH/h+NF+gVLyP/ss7qyJ/N\nsRQ6TtOCZkv92CmSvENIx8HLh8nhMt9ExgbPw0vr/FvHi7dCkoWAJoDugsgT\nXqk1JF6tnNTauEyfPhT3MNyBT9bCumVGX3MsxzwQvqJ6/u8swXZSq0OC5LqC\n9Lc/SfxPXcbIECsjuj1C0ZoCJLeMueNrG1VSoanEiz1EuIpxySTbkLFCP+/X\nM20T\r\n=RQk5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKTLDKfcxUwNRrrk673LQ40+X/3MPNXjX0YMN+PrhqTgIgHpap37DN9egKn5CkkECLbCbb11uKg5HzYAwq60P/+kg="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.14.0-canary.ff82d9ec.0_1584555624916_0.014775821522348576"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f50f48ef.0":{"name":"@material/mwc-menu","version":"0.14.0-canary.f50f48ef.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.6b48781bf.0","@material/menu-surface":"=6.0.0-canary.6b48781bf.0","@material/mwc-base":"0.14.0-canary.f50f48ef.0","@material/mwc-list":"0.14.0-canary.f50f48ef.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0c4d2eecbe04ec4e08549650e593ff154b7d7e84","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.14.0-canary.f50f48ef.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-zdN+XDX6FPzanJ8t6WYpRs/MifXB5auwgHiEWnyeCq5RpMEPQEu2FMCo8S4rzAmX5iazxUNrGzNwgveAT0QSIQ==","shasum":"3921e396f521f77325ec2b7f055e743080cbae71","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.14.0-canary.f50f48ef.0.tgz","fileCount":40,"unpackedSize":592937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec8A2CRA9TVsSAnZWagAAcJcP/2icAa2X/nD1aTMBbeMS\n2DR6dxTTMEWnviXFGAXHMUQV3NrP2vT+SNErFgs9v5TUOdN2SI0S4g/UNZaS\nPbgxDL76taqtJak3bqDJKWT/fVoyZjFN/wPCWGXJ+zXXe8hD99+FAxiKOXBZ\nMfv9OoEq3yjTNEx/O1MN71AhIACfLCcxqV8bdoG/cXnAbvWwHNLbE0lu0HN2\n4jpLHbO7YS7YU7OoOYxbcD6WMh9V9ChCZht8qePPbwu0hPtx5qA3uajeHx3m\nNQNjutfe8p/zoeXEeaLfOMwPd0Dvc0jH0Lx49hbBqthlx8AOu/hNk7BFtF/G\ncQOVAKPHCyKkRXjtB2kg+C2bjXGYG3rKSLdeal8LU7HxWo07sKl0l+vmO+zU\nF7Ysq0I9wDK3w6nn16F1FQ47hS9T06ABYVDGr3bM85i8gy0yo2ngmYur0MVx\nBAMshSBBEWAZTwxFOZd1YG/f1/kYx5a0msspkRB7RFsgUh2CVSb8Q2cvaDYq\nQmpYT/CUQzmODcIRo/d0/xL4ueE0riO9BZ0zdHKSbfeni0aAdmX7GKb0tCQf\nxZAVAwuHKMl+CDPKaoYI2qqRhLJPNjJe9QkeQQjCdC54Ipw49a3pbsuUDfS+\n4nTQvbPowAjS3yPqb0TyQ70JFYB4ID88R00EgWBu993AC3fD+1Fz0B7hA7XG\nvNDs\r\n=kQRb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID3OWZzBmor3xM8BjMgun5POQ3VnZmSm74r5Iar8jy5KAiEA7Q5IgGqwSDNyMKIYn3h4FBfRahRL0jiDRcf1V0UA2O4="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.14.0-canary.f50f48ef.0_1584644149959_0.9708966103234449"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.134cf877.0":{"name":"@material/mwc-menu","version":"0.14.0-canary.134cf877.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.a88c8e4dc.0","@material/menu-surface":"=6.0.0-canary.a88c8e4dc.0","@material/mwc-base":"0.14.0-canary.134cf877.0","@material/mwc-list":"0.14.0-canary.134cf877.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c237581285beb5a84c39a5ea15dc95e9a865e057","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.14.0-canary.134cf877.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-pGD4LOJymkZjihK/RpyQZLRacbMbM124IS7u6kMTxtPIPkimq3k44PGsmGPthTvtQXsN9hfK9Dfa2TGF5f5kow==","shasum":"c6b2e29aa939c8d38603f57ddf74b3343a7b7a22","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.14.0-canary.134cf877.0.tgz","fileCount":40,"unpackedSize":592937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec9iUCRA9TVsSAnZWagAAs8UQAJQ5SLzlOA6cIwVG5I3D\n4BDWXYWESkiYb8yb0W0WYCzDtxGTgOoBIg3zt06Ez46v7Bj93uY1sppUVUVO\ni82C7/6mVroyXM9PBA2duS+xNa6fw2Fo8YsRifIBAQYduJhOo5/Xr3AgMsVX\n0I+wRu7TxFlo3t0U7pFnvKt2ZX06DYyXcbHTRUtxKb1fOBT5kyR4TioJQyL3\nK/3l2DszeiAu5LsLubOHk7KRlJMfvpuAOpusbg0mcACIyNT6wIsIqUZUTRVF\nJnlD+HOUATOiC+ov1MKl29zlxrPF4nCMzZ/mjvQX11YNFpCB1h42Zk2FKcCM\nrlbcKvExWhN1tRos1ydNWWpKeS5Syjk/XN3zqgE+/KHFGlhkGU+kvtNRYzUO\nznA9NQURpwXL6pX1FLVYBtU3LrG2d3IfAnfjhWf8pSV0jR7KsFTnonQkvZ2b\nNDl5ozjvD+W3vuSPdDGhs1rY2hwIl8mxKMclkkL6juUgky8r7eKo1s09ucdd\nrBwF8+iDSrfoZxolFpxeFSbx2dhQvuYTb1R3XUFInSRpJHA2wllpa6XaM50j\niBEaih+KqNZivXA32KOAeTc6DZJ1sYreNbRkXCTnbnlqOx9kuUMr0h6iB11f\nSRpfmkN1DAAsUyozqqku1l2s3cCF8mJgPm/Oo9siI1/6W8GvVwHn9I6Hyf+T\nQpbA\r\n=icD/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBNhu6Qv81UDRb9zH1tEvZwB/sH1TNQ0lvaafGeHoIA5AiAbTpDTAgkPQVTGBvQwkK/NkUlxHci26KFnElbu+ROO+w=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.14.0-canary.134cf877.0_1584650380884_0.6058056052288328"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0":{"name":"@material/mwc-menu","version":"0.14.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.a88c8e4dc.0","@material/menu-surface":"=6.0.0-canary.a88c8e4dc.0","@material/mwc-base":"^0.14.0","@material/mwc-list":"^0.14.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ac28113f4d46ab2f986ce0aade128eb66d3017c0","_id":"@material/mwc-menu@0.14.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (darwin)","dist":{"integrity":"sha512-7WuZUQWSHhPNqbhLI61Sla0jzSJC7PPyrA09fJ3aE+hjVHYDCtnJxla3cEMfUeXb5ZCjfqcnLZlnImuomYZUcA==","shasum":"3c523254e53370e9d250d8ed44872b70d0e0c373","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.14.0.tgz","fileCount":40,"unpackedSize":592885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec+QXCRA9TVsSAnZWagAACm8QAIQoGE68Fl7By1S6ajOo\nyDwoWUFxAI3rdag/cVjpXcZPgx2RDx8iPDBRxo49V3Y5REP0CbyNWp5uPd22\nyQNLwFxqPN8VFBNLEov/M2iFpWnl6YJCbEov7t5BFDCK07TUGPX7QWwCQlPj\n7aVNInMDdmdYuMQUBFWZoj0hYlWjw2KRmJW6aBUXKtyTrmEVFkg33SMZuIpI\nWai0hWwu+zN2Qm8mTbyS+EB3ccqeRADcFvEvjOumrtZcKP75S5T3smMlbhq+\ninSLD8A0hyN4vcNzW1znDk00MfDbMGbhAvo6bVFcj/ue2f1naieZFwu9fQEB\nRilimeg6pSXXu3rRu9ZpM6waoCr5GDWyyGjkev+3K3tgnIfn7daofaF/abMn\nU0SwVMOhZ7cyELbXv3/PjK38L2Hh0ETs2X+KGYKum0s3HjJclwcIG2ql8z1Z\nZ3BiGhOBYpq+tvuTDi/OGkokpOqyuVsytb8tYeHJJiu6ZRwN8VPCEckbjfS0\nIEMATs6t+Z55K6sBB5KIL33OXl5q/n6A6JLQQ8rSaaqt6SI8qEPPVqAmBELu\nFJdOiDCdh1T/9WgOieNV+Xt8croqQpdrPoQ5GN6hwlSuW05plPmzaSsVyp0y\n7dgNgYR55MZsWO4nU1YMxlw7fVwfjc63xq4rkRc5qkix2035ggYSXTe7yaku\nYs5w\r\n=Jz53\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHyFzRN/niqEX3Lak42mTrh5cRivExO46RPNpnU7R72iAiEAh09szyzctBjLPjHPo3s/X1/Wh9M6jDXjPQ9jvq6m1+A="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.14.0_1584653334832_0.6901391592741846"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.2c1a4913.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.2c1a4913.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.a88c8e4dc.0","@material/menu-surface":"=6.0.0-canary.a88c8e4dc.0","@material/mwc-base":"0.15.0-canary.2c1a4913.0","@material/mwc-list":"0.15.0-canary.2c1a4913.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8d9a4fb2b0ac4979d966b16e203b2dd0f388554f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.2c1a4913.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-f+OH9378ZKII5I338Eb6NajkIAJnys058LL7A4MH6GGG/s6ySNg4yJ5a7UxVuTp+ZSbJu+dJlnC5lN5oEXg24A==","shasum":"24f0973f32613bdbf4ac4ed93a3a686b5998e3b6","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.2c1a4913.0.tgz","fileCount":40,"unpackedSize":592937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec/m+CRA9TVsSAnZWagAAY1AP/i0iYZ3bDlv9sv6QDHOX\nkHhyfsx35t4qXemHsQnOszw2wkEnqT0QNacgs5gOweuTFmm8AxPx6WX08paV\nC6yWFaL20xfKD40W5cDXucpNQN7XIk4cSQDPv/1mLi4JOFrV/wsA2BkS7ZHF\n81vQKzYn4On6W5pO9tyw9jj1ONsut+xBewcd21t7QCJxK1Vp+1uMDuMxeyxE\npOYDVWz7+Z7eWQXLCTD9bUMtgdXQpnjI4TPe/RFDzAJpMRFWkdlQc17OOUbL\nkKzU6CjhuZytoaXZPXJIgROxmCtxl2XNemEy/W5X5Y0iaOCw39joDDnmH9WU\nC/Ps+dHGyjUC4vIiRW1uN6+dVxicRhOW9Z7uwHqdWio1LRvDkA3YGMNhugrs\nq/ZAaFYJ3p7iEaGexGRl7bk0Fz7IaYAA+riu39bhqwsfCphMDGsj8hfEpwfl\n+qS3F0S41Wd1HUMyrSX8ZyLgddCDJ7Fr3UrsroXEJ+r7FYfEqrkCeQhw+djU\n89uzu52byQzAcFvO4r+9TN4FzvQZYe83vKEICZlQZJOUYIAYJMI6DC/2qVq+\nkj4/Z0whSiUK2cyU5VITtecnsjR+GC6j+O/TpnLPZBSbNJ7GMlY0kN7w3IJw\n1DTzZfmXSUWyuOOe8b0E/tF22VBZ2CtVyEK+yjApJRHS9D3hJGjd2/XecvIB\n1oC7\r\n=wDr6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhf6KhEhhwvynK+pBX/v7EN+H/zBYqY0i+Wl1Y1Yr4MgIhAPExzP04ogNjJpmwgEk4f74qQzhWcCDwx6yiib9zKYCY"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.2c1a4913.0_1584658877524_0.17961565236691124"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.3a6e481a.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.3a6e481a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.cafe18860.0","@material/menu-surface":"=6.0.0-canary.cafe18860.0","@material/mwc-base":"0.15.0-canary.3a6e481a.0","@material/mwc-list":"0.15.0-canary.3a6e481a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0d89a3406dea7d2d2540aaeb339072cc01d18e2a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.3a6e481a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-klA44L6140yq8TxtKcFzUlL4sXRM6CGftl7wJHL8CpISIQHonCis6LcaGdMRIh+ucUM8qQD7QqT2dXzKgObTfw==","shasum":"04feef1532b1deaafb68500127b0c58c4adc2725","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.3a6e481a.0.tgz","fileCount":40,"unpackedSize":594011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedQfUCRA9TVsSAnZWagAAovsP/jCadxqGbWaALkYPD8+Y\nGy726fLZjLhvB41A9ioOLVR4CzjeI5atqdWVG82yiMA3JnpQd9x2x7zd4+bH\nfjqD9Uf7jFU3Z4fBAwGHdqwsZU8UoVa5/yMMPGG9DryPSU+PIflcUv/icWMe\n0VsgkL/icS1mzvFoabUpKCd15STb2nuJt8i+XMSbt/8y6ebPz/ueR/eykHn7\nSVXxDwQmxeXinV/rzBcN3Qi1t+U0kbKEXMn2Kt5RXQZ48++uDWI2Q2REpk+i\nkwCnPX6uN9xgq8eDebONFIvRj+va+VRSqWX5Y79dKB/oNBpZH+lYP5eIVeHc\nEvmXzFS986mc+eP/B7kINsAuBHh4ys6uA1Uig8OS/h0YVBpVtfDYZSevfQNr\nDkxsrLAnNNdDJZjx41Ha/K7eEShJd8NNxt9XJeFu+hq7K2laMzQBEqB2YMuP\nanZlipB5Vf421Wc+s1Tx6QYdoiVIhcX5uap8X0SLv2boMKiV6p8wSN2zgcjw\nVveXKE9Pu2FBMrZrDtimqWt6cYnj3npjUtDe1XNlQ34vJokANtR+XFvN9qTz\n4JD8GnqDof0ugpwn2oAfgtUi5zxi+ZATnpT7HedYk9A20CxbFWpgj6CDT8WN\nmX9owASvKh0uai08SiavPTLit3K346GgMhDw0SotlYg3N5NJEvBV2Fyoqh7+\n7O0f\r\n=o35B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCytQQX5v9I7chJzafTBDhrn47GMOGLdyTke9pz98KLGQIhANO2NLROMHLhDhHXmO2ZGiungz7WzI6qVrPD08mXhbha"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.3a6e481a.0_1584728020496_0.06503408239569253"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.603d6eb3.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.603d6eb3.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.35a32aaea.0","@material/menu-surface":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"0.15.0-canary.603d6eb3.0","@material/mwc-list":"0.15.0-canary.603d6eb3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c12dabbae50536d5adf2b5a785d4a5009e53208f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.603d6eb3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-V2oIhvPDGDsuHPm0VGhxd4mdsSFgxtANC7TJA/5ztvZDLYZy1907/gOTBeRpS4GV3pHERGblOBb7iOnJEXSXmw==","shasum":"79316e3cc83a32abb86850a2b3998368a161967a","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.603d6eb3.0.tgz","fileCount":40,"unpackedSize":594011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedTdTCRA9TVsSAnZWagAAxRcQAJop/jpL8fHUiPi0ycWF\nvFAxbnN0wUZQe7zFC7JzaBBzk9GpNes6usThhmpdXcDZ/g6gxSJ8ApMvIHm7\nKC8fP37ISW1D/BMOBykcjrEfGqczjPm1497+bBwdOtSWpqfVdDQ+Jli+1aPt\nejXrQOXiu0+3zrt9NhP+T3TXnRcFTdhPCKMZJK1XZGSHfwaZ4p5txRu0g0Dk\nljWIU4ijJueBp3u2vMpVCTdWMLpuTWUZjj6GP+E6gvOkoZmg67TiotlNeN4l\nuIVhi6G3jr6iD6H4hO8r1bEaIhixyciNqx57zOvn1NIPVn6aJM1lXQUkepFd\n5tuWBZhOoJ3LKx0hRnmHnH2a7G4DWOusDWbKVZwifd+OetbIwPMVKTq9f6dC\nqETpy9JLfAoPAQNQtHmP5WhLEM1ICEwTuOgxA8WuS4LwWKqimk3cqWTAyFCq\nW5cbQRSJr5KrKDd8V24CeBghVnR/NFw/OJ+dw6jD2H69JMr3axMvzjk7Hiea\niMpjOtwHvz6st48VqDHTt1jeFT864xYVBjIPVtEa5xOzjpOX6jCrBJo0qAfN\nPQg4fkvjAEFUO/Gj9Tp6IAwhthlsM3uQx+tqfHEAaEAa7CDudSbehMty69b5\nvBI/mgCAKBfhz+zXX6XGKevXnXw6eBweZ8KinrC0k3Kz+7E21AVyKipd2qwe\nZRSA\r\n=OfxD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBb2EbvnibAfYaZhIahCgbOBkpIAOxqF7C2m6G4aOOp1AiEArSPLGDp70Q4BkZVA4lr29X2IKCn0Qa2h9uLUXyHwemA="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.603d6eb3.0_1584740179189_0.6732890724068541"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.05c6a93c.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.05c6a93c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.35a32aaea.0","@material/menu-surface":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"0.15.0-canary.05c6a93c.0","@material/mwc-list":"0.15.0-canary.05c6a93c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"62ce85b6b0e7c20ae9938ba7b42af970a40f1f00","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.05c6a93c.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-c1A1viYGS+BboBBNYRA5cKZAC18DKO3kGfKkOcqOuFyTc4vSs4xTJvjgFCgKbMF8KECTa4wvpikDuutdy/LPoA==","shasum":"946abf93f374f7f350c2062e9ae828e638526913","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.05c6a93c.0.tgz","fileCount":40,"unpackedSize":594011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeeOWoCRA9TVsSAnZWagAApRQP+QFnkO6j/eZDqWHJLhSP\njyiG5RYuLfSSb0iM1fbCvw3N0xvkg8z7xncnAfSDT+yzVBbk06pe51r2S4mN\nB5V0BeDReqZAbE91CstcqMvIcjoGZTqJDVcfwoUVDq75QR62FMk/dkSgQF00\n0nttxF1O5R0AY30qytHtem+GW7zmZ9AVuF2YK0YcWVInefecmOTs3d7arq5T\nzEcFR7wBjdM14ozF4PPj12urHAVdRj3crmlBA3wAf82sSrVgmt86G3YFRyeI\nXKizbUUY/lf8WoWbt+J3VOKjOPFglzbgf1KxOr/+qD22kg4m1woK+HMU3yN4\nBW2iU//2LIWsrHA2U/yw40FakB+2OEqu180a+RQFLtklc0qx44ll+TpCNPKd\nrEI993/wwb60lTg3X4O6pnOJ6Ci+Tl2HFmB8A2b0jdx0LITgj4MUo+CuQrVD\ncPpPYfVlTO5+XKLEvK77ip84w2cgAILmpjgtghl/eE6t4ja+CmvCx+9u1AB8\n/R1V4A0hSOD27bcMMUCJEQ70SpOokC2rn5qjZNegw/cE0tOVivKg7INj636p\nueWk/E3ubHGupDEnYuQUzK4RyjfQAxUAvDxlu4ampgn843hrabMMq42vSWEk\ngQedgIjQGNsKWQIpH5wto9PlCTBaVVgLVTceZRje/Pp5ObA6C0AvkLURuRvK\nV1XQ\r\n=GNNn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwczUmjBT0Ot1QVntsCIvXRKmrnUki7Qe9aS7u/TfoSgIgdt3eihtSCzo9lXLz9l/a8UToeX2wXZ+kQ/JMJ0TUvUI="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.05c6a93c.0_1584981415932_0.28247899576959457"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.1":{"name":"@material/mwc-menu","version":"0.14.1","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.35a32aaea.0","@material/menu-surface":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"^0.14.1","@material/mwc-list":"^0.14.1","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b0de4ae05c3088b277f5c20ed01e4d684cc6b8b1","_id":"@material/mwc-menu@0.14.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-TxuLbRB1pEd5gJuN8VubG4K+M+BnQSWTp20OV1XR2wxY4m03TGBdMWTh3xwtlCWIc8Pk88GhaGorXECD6GWJEQ==","shasum":"86fc8b3d74823aeb982323f729b6498830ebb165","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.14.1.tgz","fileCount":40,"unpackedSize":593959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeePiaCRA9TVsSAnZWagAAfB8P/i/bYC1MbaOdX1i9Iuid\nxLhoLuqMX9LyjGPZNILgJFW/BkD7/6h3iIcDHZqcb/qf3qDDuRzj11vcQd4N\n8frFE5ve6DKTG561UotYr09mdIPm7r42Mv47wJtR2p8cmZTgJkZbtJUjVMx/\nrJ1rbh9/wcLbjeV5UA83D+xqS8H9AFHgzyZVHm5Pm8AbVBoxbstpweyg5GNe\noda4pJd7mtf6WGV3sjvazchDD550p/KnPhqvrxHvFild8VACyOrV6QqswNjn\nmFkDYzpZjoWdHtP7kZAHbd3/ozG2siNlXFsNrS/jR2vx+zTH/b5BuC/zgcXG\ntRhAVk6mjP3dSx1xTkp1M/E5iFLVoxoioeTfcemIPl+KyHaggADPoJt2tdtU\n4WjtXqCAFkTRyQ4Wxr3Es5HyiFhIg20YtmzvJk78C+5vTqKtsFZAiEoWTh4J\ntfuDEmxsdtBcPRBTqLhthBZmvmk02lcw3szFJ+x4WJxKU3Sr0THA4i0YUu8v\nw96ffzcRWxtKZpnZD9JiFjK5y88JZLnRkGpJhqzIHfkC1YPQUE3RuOlNHISc\n0EMC2ew9B7YClOurJCS47JyQzMGENfv+Aplr4UwfoHCvxAvpvAgJOzaCHOrF\nrE7oZo2XRnrTUQC7IFZnFP3M7wx2bcs2jAfJ+Ms6xd58QFkpCdW/1FjmVz37\n1LWb\r\n=uUS5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICykh/DjmnZjk+fAQbvtIpysxB3AtrW7BTD26wq9+IdNAiEAk8aNK63YrDfORLkaUBHV088S/uxBx5C3FLVFmHNRBZ4="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.14.1_1584986266451_0.2692800446897259"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4e6be3f4.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.4e6be3f4.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.35a32aaea.0","@material/menu-surface":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"0.15.0-canary.4e6be3f4.0","@material/mwc-list":"0.15.0-canary.4e6be3f4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1512aaf308db7992eea7201d4af81bf1e616d5d8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.4e6be3f4.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-BSUlyM2NhDWUENB2ihFvinVBijXu0Yjd7lE283tme7sDb8lOZXl7DABXpAoltea16gPZCjgjo2peuoEwORwqXg==","shasum":"1cec5d7ce910fd6db1b62cf04b2e63cf4baf77cb","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.4e6be3f4.0.tgz","fileCount":40,"unpackedSize":594011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeenSkCRA9TVsSAnZWagAAHfQQAJuQc1c9dAHmEjbUEH++\nl20hCVHPoQWd+sIFhNRftjOBpyfjKrdsz1YzkI1OFj9zm8eJAngnqKGJec1K\nteldZOY0w1fu2sQVpefctTTYONFpFD6rxoOPt2osqiGHUA7bzvo4AT0nfEDG\nHvDwx3YMqPzBT2FTzmcOYJ/W1lJpCUSqZsjpT9E5Y2+9U4w3bcQLrd4Xockb\nXdjd+DTiiNdxvLOJxvcYKnNbwTmIYCMkC2qSM2mCD4AujJw72DW70PAhBtor\nHVdmFFeYiOBBjQBjlD5AvttAzQoFYbIidj7yahiItom70rvUwmJMSt+6tlLD\na+Wp9akn0GtG6/RVMSmz/6C89BYC5+j2JALaSR+g+MkoYKQs34LkixNp9JTx\ndCusHGagoLTORVpQ6WmHRWc55k32duH3J2X1gsPAcg+2/YeyFXcH+tc8rq42\n2L+ZxRt5t2dLM5rm02ES2ZDiRBX27fd2cCDEh+rRoDWH7cHGk7a1W5XBjcym\nlZcBDiVPSVHSeQ2gIO2XYCS29hmmCQyNBVOkaZsliYvYiLE0PLWz97ql2n+J\nYELR5dsVRPD4MyHfZzBY9alhefQXeiCxfyjCR8xvv+/Jxul6PuX8IvIl2M3N\nTotUQ93/eeuHAVaZu5dxp8E3UBBvv4AweP26ccHM+p25qx8DCt+lQVmUQIfw\njKEV\r\n=FML1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFNAUuYvk41FDxL2TjqqD/7mSFFcRFcqnQO7vYzrDn0qAiEA9huZbn9S4jFxMm+4rU3AcOAKoUpEdS+ABQYYftI5Css="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.4e6be3f4.0_1585083556349_0.10306392207511772"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c29a683d.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.c29a683d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.8707953b6.0","@material/menu-surface":"=6.0.0-canary.8707953b6.0","@material/mwc-base":"0.15.0-canary.c29a683d.0","@material/mwc-list":"0.15.0-canary.c29a683d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8425a605fcff9f0247ba649d1c8b16a70fe79720","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.c29a683d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-L9V3wjhspNZrk9dRhDsBG6WbHJ3yFEK12lWUarlB3oAtOnOPzphGhlEb+TI4Xqb3vT/LDVL9u89nwzf/Hv1/zQ==","shasum":"80df0c7ed09c469bfba26362da05429f62f75ed1","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.c29a683d.0.tgz","fileCount":40,"unpackedSize":594011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeenjNCRA9TVsSAnZWagAAKCIQAJfdPBk78ZmZoudr7PqC\nobYNGqVrznVCVG+2LrUeJzht9PDodlJNP6gmK9q1+wWxf54KVlgdo9J/q3Ze\nk2KJnz7lXC0TlgzAehPHY7upIxbSMab2zySMdhYxL/Aq5vd9x0UQfPgt/hVh\nvO3br0flty5sfKtaPYqX5KVD7Mw4kDlGrBBHVGSnZ8Zb7NDJttkdNhA7f81P\ndegnjZh94OavpL4+cVSBDVXQxwBv9x0+rBssvQsQ8y4Hooln0nh7EaN/bA75\nOHVEKqI/A4Ew7VRXE2a0JO9zSjEHxdbRsRDR/Z128T7CTowKaSJUWDWuaQz0\n+zngX8/rGRXEaGtxgeB060vGUy6hpyiulozZU8zznGrJfGu5IHQ9hiy484DJ\n97+G956WBIxqCuiz1XXGAkRW2/Vk7aegAeUYVplqByPWKrSzcMWz61lwruRN\n0Pxc7CeM2q1FOUPb13dsn/1kTaTVXy/ZpE+oiqAVPUp6NWGzaS4/xny1T4+v\nY3Hn8yIsYpx6EUTxk1dF2HqPcjx+cRijtKYPBFuqtcyct5oGM0Sn+kbSBgts\nlA+03TMtIqderf2VMKJeaWuqGtpVk/0YQ9L5XaYRnVsrOnjNimGL3O/R2hgV\nWJiVHKJaEhaibEH3JHmVbpSKV/8uJr8Uisysq+NeEuX+a7auqjUPsNrVvktM\nyikO\r\n=vl+5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGP1zBGf9r2rvoIMj+3ZCsSgtpmgY0TYsu1+oP37yPdyAiB1KJhws5EbK7jVp3LwUlvBZ6hR70eGAb6bb6om3pYuNQ=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.c29a683d.0_1585084621003_0.6801691511891799"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.fca3dd9d.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.fca3dd9d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.8707953b6.0","@material/menu-surface":"=6.0.0-canary.8707953b6.0","@material/mwc-base":"0.15.0-canary.fca3dd9d.0","@material/mwc-list":"0.15.0-canary.fca3dd9d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3eb322e4775d836b8959bdd2dfe63f09dd0e0fee","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.fca3dd9d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-W5mb/xaG/78dCk7NFsnpcdQrkFrprQXb8SFzyZYmR354YV35Sah1RGdpHhqIK+7Yridxg7DL1fnr2gb+b1sl+Q==","shasum":"e707d55eac51dea4437013e86c3ed16e2550084e","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.fca3dd9d.0.tgz","fileCount":40,"unpackedSize":594290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeepslCRA9TVsSAnZWagAA+6YP/Avixv3Nnb//PsmMQHOd\nVP6dVCrXUdBeafY1jmEgXQI9pxVF1As7sVUWw8SC1ZP78j6l72QlKh2Ftgnd\npvKMKhMU7FRWR9vsHrHv9QXFvXnpuqvvPHmubtH2P+Jvx4P5qV82FD0kSihZ\n19nXNyX2i2NnZoGywLECqBYXmNayrLlf97MiU0f9suoP2i4unnFFUOLYcSTh\nkfX21i6lWOu7aC2wtmSzOsXckPB9A2I4gbaagzxiNMGSYQi8BM3t2rKqQXlj\nH6go26Y6fThPEyRhsnm6Q9Z444fDqwTayF/y/URSCs7AHvFLlmZVfiFfTiuZ\nlVFmJC+ejiku3oOZ9wMVrln6M8VCy1MsUgsf7kZL4lDXX7RCLW46MhozgqeA\nhfAPEh9FyBXMteEyOoC6evuGbHN/2lXmXE1kKTmgsvnj6lCQlQW6L1oiLyRg\nq22sSzUnxl182D+AcUeo+SafTRbEtW9TN0CuSJpVlrO+F2CNQfB8j84d4ma6\nQlGodWYbTd3um9GDqCLN4TBNfaYp+PbHWoi0k+PzX1gFHHpeTKQGqQtQ6T8P\nJWYgUVShnrSqvCRVdyj2yBINen7AfS/XsDw2dX+0e6RZaa0YZlTCrvMeMQLf\n9mjTlAqdgsjwvOB5Vd2Yv8Xmaowiu5A9y7ftZ5wtnC5gwJ4BapZQbeAPkrLk\n92Me\r\n=YZ2b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCycB+RypPmBK13y7h4exWwa7DmsTRhdyzn3oxhHBQYcAIhAOXp1sqUr6bzyOFoPukwTnhP/PtP4eFfXtaxrEtTccc4"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.fca3dd9d.0_1585093412583_0.6532511044442801"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1e73da49.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.1e73da49.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.10af6cf39.0","@material/menu-surface":"=6.0.0-canary.10af6cf39.0","@material/mwc-base":"0.15.0-canary.1e73da49.0","@material/mwc-list":"0.15.0-canary.1e73da49.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cbf63b814d242690910ae4946b6144120c317eb0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.1e73da49.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-aPy5JCsrT8xpifZ+kUjdhWzRr5zXlgv6wOqFqyTnodnB3d5SZXI9RNWXu/Mz8TYiEqXyptkBiV5E2nc0sF6WYA==","shasum":"3b4f4a3d339280db8f964c64428b1c9e67ac996e","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.1e73da49.0.tgz","fileCount":40,"unpackedSize":594290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee81wCRA9TVsSAnZWagAAPPYQAKPa2kCw2AeaIJRt7Wg0\nVX8yxDNQFQC66/91okO3UpaKpMc9KYqecUwRw6TaX/RCtF1V4GKjxYP8I4Ob\nED+CxE1zbyxuXYiIrSzZ/i/7hZzLGZ7LRNRRutV1eX8lmMGIwvlFziF1Ga29\nijbkmzszDafDqXZeZPyH8MqB765wC3Wv9TM5BI6EbHK2jtsHpxoKZzO5+DI9\nhujXsb5S9khr3w4VSCXE8O9At7jGmaIlBbGwJl1WB9J5LHlk8J+xW7tFKW2K\n2eFm9OXrQUz3+Sqs28vOBTzNkTgUFx5I7vG2fGTuBR/6YQ00NbbSXikTgZYh\n0dYDHUronNh5ZpX4r52mGeR+5P+m0RvO612epW8sRW1hOI0SebCCSCKocHIN\n8Ylbxqkmm8eQmX4apZNDIPa+CHGxOMXNqFLXrNxSY5KOWLzBJmxD229+SLDQ\nAow3sJh/zkIol+fJ7DBSj8lACbcRWKymoVsXrZJIFcReA5KfzteaT5ayypMh\nTYHErlbOLV6OHbMaYBYEPfxdts4kS3T1qeaXbjWxcup3byFAcITZjgIU72CY\n2dcMTB4ALBHs/XJ04l1U66Hy4s2s6zkiNaSdgcs2Yl4zXh3CLxHeaRol+SfZ\nNPLQrKs9ECo5CMjz//ruyHqR3p9u/FIcsuNqCxWC8C8qCIyFUyTvixJAbSql\nirnL\r\n=lbbp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrvxjb/K6I14RUulbgTSweeiXhydbgPsI0B7G09ZcJLQIgD7+5e9SDLzRxA7W9W9gLTJ36zHh6rzV+PbTAyxw5HcQ="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.1e73da49.0_1585171823821_0.38199462360547454"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bb6dfc5a.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.bb6dfc5a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.10af6cf39.0","@material/menu-surface":"=6.0.0-canary.10af6cf39.0","@material/mwc-base":"0.15.0-canary.bb6dfc5a.0","@material/mwc-list":"0.15.0-canary.bb6dfc5a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.bb6dfc5a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-/nMsSIeDpV1neRPltmTLMXRgZnnEL9WlRK5dbMbrHplI97UtWtRn6wKG4aEGk8e2aqMGUhqTn+einqjC8q0OcQ==","shasum":"f8f3299a51c35dc88ca5533b0e3d0f4be82273e1","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.bb6dfc5a.0.tgz","fileCount":40,"unpackedSize":594290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefVWUCRA9TVsSAnZWagAAZZAP/iaYjjKiTzHFbASEHjG5\nfwMW2q4cPPCThGTUIZG+UO5XYjAMUtOWV34V85q3bNi+rNcfZfGs3eTSpr/8\nhq5rPKQdjXZoSt08iFi+g4PK0GUE5FMWDEFl4MXSmhn0NFv8eufFpIDiSGso\n/r7ukgs39Yu0U6toJQQAfN+sRd7coaFP5/ADLYBKHXHP+8CrEKGDMwtZeiHX\nzI/aQm5aFqCVaxZfJ2YFrc2/pnYEDUwTDZxORoL4jjp+69qHiqyM4zMmVAGY\niTLDxmimhb1om0tNLlD6zM6EJD6hQ7umkmx6nU6A1WBQM7XIHwHGifWPqi7C\n65RO+JNfH3Cwt7+Gd8gPUKBCvhObk99T0TVg0E7CDnees/2+WF+MCGTvAMr/\nf2TyRZvj/viM8Ywo8c/ypyN7D31bdfrHl2Zt4y8vOY2h65lKyV9EexnSojbj\nOyOyHOB/rfbuoTjOFRS4Z0oA3/yB3jGgqycJ/9KnB6hNMcaT897gDSHcW0SN\n2N/6/NglhKWHfNFZDexm3DVDJKKLQeLNjuj5XAWD7NaRCIojRjI8P7WgXunt\n5YqAJWkaSbqYooF0feirqLxpz9n0dOKaHrRroz2MurZxThhumvNXpT79UJx1\nPTUbhj9Td+QDlVmnRpZl3YP1BJ603T58V0rOQHWLz3n81ZJeVyr+RTfcBTyb\n2Acp\r\n=IYvV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDl3fd66qANOrAWAnFSihesO66rfhy7//nzn9y261qT7AiEA94fwsZ9+ZZJ6HaypyKQKnjojDkuTCAO1LJ58GHoBUhs="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.bb6dfc5a.0_1585272212098_0.5816436890445575"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1884603d.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.1884603d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.10af6cf39.0","@material/menu-surface":"=6.0.0-canary.10af6cf39.0","@material/mwc-base":"0.15.0-canary.1884603d.0","@material/mwc-list":"0.15.0-canary.1884603d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9a072ce4f7812e5120dbc51ed124d9669e1f7be5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.1884603d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-06S94wWUKGFFg9IzFvnZh5twWg7WARZXFHnfXSALvz9mCC9qNxYdpoLdpsREGouumPSCy6fRc+7tVKCAcngKYw==","shasum":"b75c208de1edba329376eb6c6ab485ce4cfee887","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.1884603d.0.tgz","fileCount":40,"unpackedSize":594290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeflpQCRA9TVsSAnZWagAAijEP/0TNXEAAbnuhVUnbasBy\nu8q0+kKlujxZx3GHPRys817/zjXmRra66Nk2yohD59r4WkODnW6fkwHlFhz5\nAvIuc2e+sgL1rpX4ILAFsrdRAFLFInIDALSpQg+QzRY6+DQ4uCFJm00rx8LT\nmk72vSEWgwxh/WhooSjLkqO5nf4lculMjRWbpyrvcCDQZhLLIYuQ2+/B+GPT\nOaGK65ByJrqtzNb0OhCHSQvrBnMryihhhoQQq5NSe4f7/CIVmIvAV7aBVpq4\nDoHTKHkCt5rnJiYYw1AL6IFQs6a/9Rb63tVl+ZmKZQG3pn5o7Kr5XuArbEoc\n5AJiXB73Y859EAgQutw7azwvtsFH8zjZ30OA+m4QDZjp3zk9SNJMyeq2eXIx\ngDCrk8Txi0GnfEq6hfpHDDmQ2U9Vh3pQyebyne2+XpTFrYhBiz/ckmNttumd\nWqa5eCYzU4U2xoZw2CXr96xbZ3rkMcQ9e6hGElVc65nqq5ADdzEGweaun3uG\nmMpVBgr2hz+CujKTwrz7VE7GsT4Kk8UxuEOu5ppQkH+QvBVzAvxEHJvlgUZq\nmCNWmA7TtYA2ds7O9pGxbAO21f5gE9mtNR+4ArNimNqluPHtZXXPPCNdnJMK\nwn/5OiPG8ngKF3uug4aJXgQ21mBBgGK5hS8XIyRbSg8XFj5pAc+qAA7S/72Z\nL8+4\r\n=hW70\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6PlaJQSRDcnIJM0xtQsp2kS/tcaegP4YxUSJe452B7AIhANMRDggVPDsIvtL6jRKhLamMwnv20hr2nREqkpaocDcL"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.1884603d.0_1585338960182_0.4848152386589848"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aff73cab.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.aff73cab.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.d6315efe2.0","@material/menu-surface":"=6.0.0-canary.d6315efe2.0","@material/mwc-base":"0.15.0-canary.aff73cab.0","@material/mwc-list":"0.15.0-canary.aff73cab.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"40f9b297ee5f13af191b6bf450012454426c44b0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.aff73cab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-NV7s3ov/iETX50+iVLNCNqqTSkmAUrpLrsKb0Rjo0GW992hj1bvXDNhPu1NBpWol2Qn/sceEzqRi1ObEEdDl/w==","shasum":"4779f4ea9dfa44be49e145ec463e0ae6fd5496fc","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.aff73cab.0.tgz","fileCount":40,"unpackedSize":594290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefmzBCRA9TVsSAnZWagAAC7kQAIc+3F853a3Mkrh1PRUw\nqIueq3Z2iifWk4zBTw2mOLr7gbkpAGXSw6zTEXx6Mq2nanaKOvN330mAzYbE\nC2lAkM8CLL8GcALkSxH8LiYadJ+WIMW+/fAEVHjUYaBBo9/YEHSPhsD3atIl\nwz9oDOnxSh40bzUz09N75QRxtc/zKvz/CoiqbIKHiK+ymBr8G17zcHBYFkYo\nHIXiNcfZZ3eRvA0b/2vyPLEfq0mLGwy1PpwXk1HRH//1v8EOcGSciWMBc4mt\nr815WMGibthLA3jo6u/1yQtio8GOHQPJ1w0FabIKWRZGQ0pzluoYiYF9VZEf\nnXo6eb/tzt4fwDg/PzRWf5nEFY5ZNRgbYX2mjbG0AH+dlZWgiZ7vS58UwD7R\ne0CI1vgRJmHxvYIvHd3ZSYc4QqdM1RVszYEFEwHRcTqJGpTR3jPCLRHz77B3\nXBhYWzn+rE3vRmPYWUO/P41o/pfMYqRqj7XbTmkEjc92kCg+zBJbHcYG+z/v\nxByolwix5mMqkuBO15oXg1mHrGU1meM9/8ngxn26YiTn5wBTWEizmKb3AmrK\npKGxRIEfJJy2eErcD9avBAQic0hNKmjGZrA26kKWgeKAcLKAUWAGcHN20JGq\ntDFfaDi7xpKD/WmWxUQZjNSNgEh0mvbW5hVV/Nk8TO9zl/gUvXbc5gc+HKKV\n8hPd\r\n=Xnx8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICTwuJyytkfkQ6XD3GvZzCKKc6famGVzOMO+fZU0YgTrAiA6ASXJwzP0L8nq+uxDmMQpT5thQNDj52KNLzUXDkGhaw=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.aff73cab.0_1585343681177_0.17565819256791482"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.63168f61.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.63168f61.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.a3016368d.0","@material/menu-surface":"=6.0.0-canary.a3016368d.0","@material/mwc-base":"0.15.0-canary.63168f61.0","@material/mwc-list":"0.15.0-canary.63168f61.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"84107987770a82843942246baa8226b37f269240","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.63168f61.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-g+30Tn+fjrs74QP9BGR7Ts4WraCuyb5d919wMZ2VSpDY0Cqs8S+0ljmxxlWCjquCmz49hjCCEhF2wKIO1zMMoQ==","shasum":"b73f7c52120a9df802eb874b44a09d9f5b4f3239","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.63168f61.0.tgz","fileCount":40,"unpackedSize":594290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg4gkCRA9TVsSAnZWagAAr20P/AmE3+4girvTmzImSYze\nYepyvTN0eQD4fbP/iy/rjIEo9X8N0zmhiDV4C4FHeSnq4p/XZFO3OY4aG0hK\neQUoXMruvFf9eqGgttG1DIshr95eyOsX/Dx11JprlV3QaFbYvfBqWR+j+yre\nHJT+nANLt2TRx6FUnKY1P/ZzUK9TMSwa6b/O+E0yQ6HlBfiPphPZmnMzTGhU\nI/2ZPkxgzFIsDFt+u5z70mOBmpRhBCVg9ID1PTZdGfucZSkv0Dtse3ztu+ZT\n7Vh3pv0C9N4YRsflq1PUFPuRrRv1MZnR+q0X6GQ5VnLcdEx5JeU/UrMHZsNj\ny99HB6/bb8PHBZbO69vf/p7wTRcdfQojYzHrH6WbNCCaZGVC8iVpykM7O8du\n68rMaNEETI8gz4JL/brhnO3glgq3fOrqZiLlrgyIWDOMUnlep+N5EbuEm9DM\nL9SXk1sqivbV++l7OVidHZVIndn/yxxC0M3fFA1SOiwKNq3A2xnDvnf8IJ15\n4YF70hh7A3t4A/hU1oBOpBTOTIeoTigC9JvyB/GZAyemGMRFpag8c+c3XojP\nU+VrygWGQMayR2R+05kWO+Ls6FBcaoEC/9JEOZWetbdohxLjd03qwbOGCiPq\nv7gmFjHiXE7r1hn68vjkczA9y8Pv8Z5oqCd5vzX5TdSEJxCBdBx3jxkYFswv\n6XuS\r\n=hNqG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCAuBxaNA4K7/MJsFUSkrppHKRsG5ufpvVali2nDaGM9QIgHq3iXf9ZLfSYWdZ56tgrjkVXfkIP65HHMnc8cFXGsls="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.63168f61.0_1585678372251_0.11898649260559391"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9fb79b3e.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.9fb79b3e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.4b45b6620.0","@material/menu-surface":"=6.0.0-canary.4b45b6620.0","@material/mwc-base":"0.15.0-canary.9fb79b3e.0","@material/mwc-list":"0.15.0-canary.9fb79b3e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6669949a31d7f92febd25f5d49eb40a5db4aa7f5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.9fb79b3e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-eVu3qvWISkGkPsGli0iEtHIdK/KOI4u4i8cQ5pY2pTkmIIoDQLMXcDwXYxmL1RBhy2eYYqNdnaoIrqKuGKPjRA==","shasum":"3f2c581cf71c3953896d56e8b5aa7e0779f680e6","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.9fb79b3e.0.tgz","fileCount":40,"unpackedSize":594290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg7QrCRA9TVsSAnZWagAARaIQAIDGOM2MlePnIvRR1hLt\nQPIQGwiYVuFYQ+I2oXQBRWFMR2ECbgfnhupwijTkiIM1WZBJ1E5JgfueZR+s\nY4q6hWSkEuWoLuE5U6mTwX62OpY/q5c2UKq4TTbU4rdBKNVXE8SK7QS8LOko\noqQj3WZHjCTLMvs7+Lle6rD0sJgYQzTfjlGdbSiCa3JymTbwQbe3KmFTmfWf\nTZDnZMvNNGUf7hai+xS9KRCyPDYOZfSDMLsu1L1h/VgEYnng5Sc9e9C8yDnk\ngAhwqXAqpNtPPBjkF1WAWzTkaJT4Q7j2nIgWZM4OpjMRT7mi/G/cRYvhJKns\nDQeHGa/AyyH0QioLxqwv5gMJZjl2YsgyL+3UEADRKK8AOi67hOuSOa+Mepp9\n63B8vy/kQzghFlHh7T/mbYbWi1k9eafYEtb194+WVzt+hVSSZkg4VArTjhfm\nHa/dhkbxZtt9QeMkTJaYrF9haSn/sjD4Le2fEFgc+HpMcTdyfGgOuI+bZ4BR\nNamihYETfDxKixkXpRGTU5eX9UTOKkkzgLucmhCnrbzF0ihTWEc2+XFJGvH+\nDl/4OhtSSnXOMKY4PDtgdpdB/1tFxBafPBNHUqu1wSUWQ+H21qfeRVFO9471\nVqOLIpGzRkjPJhqKApPlSJ9kcEM/2ocekqXKgC/X19XW2TbEC3Q8i3U5dasB\nk4kI\r\n=LV9s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDlkRlvfkAaf9IQJ8HEuEXwbExJSi1rBHuaAPqFwH5piAiBO9G5uJL6RP+QqYAE1b2iYWg38IdNqWPPRYk0Sx+uvUQ=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.9fb79b3e.0_1585689643332_0.4846586928455756"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9bd3e9e2.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.9bd3e9e2.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.4b45b6620.0","@material/menu-surface":"=6.0.0-canary.4b45b6620.0","@material/mwc-base":"0.15.0-canary.9bd3e9e2.0","@material/mwc-list":"0.15.0-canary.9bd3e9e2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9b56904aedd36911e83576292843c11af1a00006","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.9bd3e9e2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-TclPirARLHSFYTDJWbqgkHg03A6lN+mqud58w1uSnc5YIkS58adqr3L0+LhwugdTBnAZOgmd7XrrBK2CNWqYhQ==","shasum":"869b4c7cf9af3a76499f5ea991ca340ed0f86459","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.9bd3e9e2.0.tgz","fileCount":40,"unpackedSize":594290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg91kCRA9TVsSAnZWagAAoZ8P/igmHGuxM6wg3gx7ZEF2\n5T7ChcYT/JvZm1fe2aiPznF3ks6OOrl3dRnvb7J3iY3RsByUqL6bj8kmWcpC\npLY0AWKsknau1017VaYYPrfRozLie0PhqVQu8PNiFNZZrlQ2M7qBI0y0+MPV\nNL2JPygXdyGax9bHpr2nSd8Ra8srJ496r/8Q715O32w2DhheuolAi6zF4+4q\nCt/eVLEW1RdWO4/pIjDy/4cgxL8R0aOhDJY9rYw9KKZz+KJmneUvH4m0hhOb\n3uREZQIh6AW9o/trLWJFgI1fQpU7m8oYnTFxK8U3CELuSphBV9VpiKE/VALN\n5iQYUJKLMOg0fCTDO5JJgola7MNiw6UtEmjehLK19FabLLla4Bp2CCnsrAhZ\n5ztF5X9Bzj/BSgM59saaEnHCfFXCHUUdqb5qR5jubG+UgrRXvQ6M64lWSE7n\nCL1fyinXwJEUWmAzVfvcv8wHSmzWuiRSLE/91IWAk46czZMcceVLGBmjXh47\nuAEfX6IPHPOUJGgbjb3kM5qdUdBqzx2llvoE+/Os+b2k1+UIVx0KiNiS49NU\ntyq/PbDu/9s3ruXwOB9TSrlZVhKM66UpkJ78Z6EhHBoEYT191MHTwMcw+9e+\no3kf2PLKsMzP2iXrFism9qj2pGAZYZP1oqnAL38jaLms5Y0XfcRVxnxcRnYG\nxUmj\r\n=eek5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA0kkOaI/odo2eOeKkv8O0Oi/tbFMuc5qnpdcOOwk9JcAiAvYaki9xh/+TY9yV5eDLTEgxgA7w5O8MXe4VSpOOi4yw=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.9bd3e9e2.0_1585700194884_0.10044985043800736"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.072084ab.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.072084ab.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.e84b9c8.0","@material/menu-surface":"=6.0.0-canary.e84b9c8.0","@material/mwc-base":"0.15.0-canary.072084ab.0","@material/mwc-list":"0.15.0-canary.072084ab.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"98a539f9970dea2ebc84f30f462c69e72dc0c4b1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.072084ab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ZyBelrKqWrF9z313BfG/XzfeVmOnp4qPUwD+QmBCzmOnbZQBC/lu2JkRyo43B9wAm+f/sVZ9d2GP8HWdHRGzsw==","shasum":"652b33aaff358b2f6b6d593b281730dde9a5d938","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.072084ab.0.tgz","fileCount":40,"unpackedSize":594286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehOAVCRA9TVsSAnZWagAAXhMP/2LmAcGiV1ckvhF5CwSI\nvrhc/nePLS62MN+RMBwouWxZquPH0HRB2tMqYOmVKliz+b57pT1p7ilHX2RP\nOOGYic4yMwT3tQ9sRnq2cxi0R7Wv4HygUvVSZHTawA2Zgc4c0C9H0JcJPxyx\nIAqGQgGaD66rcNREyGqyVYPdJsQwvs/5+jsf67eNvUX/ege1qaQrybQCXG08\niD8iYLqM79pq9nPs6mp5mBtpYhJaYyTXPbeWq1TvjkSeXlIUqusKAmzZNE52\n28YrDvCO+9oG7yMnVr1PJJp+lEoe5DZ4WT0MU++1hRKQobW/44c+wKSMR9c8\nbkuFbq2sZaI8F3jSR5jjfN83stDCGhIUmv1G2wrCKuyze52eWRQrI8a+HmdS\nmDoGdeXliPMVlZGsHlwj/JUCeRECBPwmk3TyoARQONhtYLOHpd4u8/1RjDJe\nHZYmmi1k/xtvp1QNDsaRkKIrusugYoC7f1AHiiFKld0BYPIRaPsCZnDnYojP\nEBunD2VnJ/iHNvZ6UyN/H+Ce0pL4//H0248LDEpsKPEGab4hsO6l1khOWqVW\ng7aNj3rPW2jl1Y4owLJzOa2uBi47jtb897LEhdKh+3swujcZ5HZmtP+xMtPa\njR5YU/T5IJkn+gi02EQpTrbm7af9+qtQNv5DH7N/U4RpsRY6CuMTpgCROTH/\nZBYj\r\n=ldpM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLcZnGrGwFVBDoZnQiMAJY7VYJia4jQf/GCLDkeUVstgIgXsctRSrrV6xBbSe3hLc5vt7DDtoIhKA+A6HmZEvBAEQ="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.072084ab.0_1585766420902_0.4150619587992772"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4dec04af.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.4dec04af.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.f1f8e60.0","@material/menu-surface":"=6.0.0-canary.f1f8e60.0","@material/mwc-base":"0.15.0-canary.4dec04af.0","@material/mwc-list":"0.15.0-canary.4dec04af.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.4dec04af.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-wvhsZs3Yg0JaOOoB6pV8xmz/WBd3tFkMhKQLW3RsdrTRosmI6zmKFVRUS/WKzabtv4wivycNtjL8xNqDXZHOww==","shasum":"0f72b5cf19d9cef5843e16e0e8d954caf473b8c0","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.4dec04af.0.tgz","fileCount":40,"unpackedSize":594286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5zWCRA9TVsSAnZWagAAamgP/2vsqwNgReBaUUOHzh7y\nMMoJomGB0v/zarm9gu108e6bA4KTf89F2gLXjZhLsGp1pwELR70rQI1KosQd\n/6A+FZcQAc7aFVUphEQajnQDHUqqP+QTY95XBwGGMtStWkCMtjwlDICIIDhK\nYXjZ6H4lBAZuTF+lzEUne3rb1KVuZ3Ku9BhYiDbN87ZnNf18UlZvSIJ1cYKP\nz4IsRBasVYn5+dxSnXSIg8J3L1S8KZMIf4hcWHUh2/RepyHq8c6r64UWi/8k\nYxcA/kzUQzs1s0AHGsVH5vAc8hAkJStHjBqUD5gn+ee1yEalzaqblEZ763yq\nvMnAF4LWfeDbZ42NLw3UCw6Fc8qgmJoYLbl/+Xldxnxw9XtIGAF+ernxB/bC\nCCZU+ON4bUouLUAYi2lI9m7V1E2i8gXeaFyuEzW2SHVJRF7cYkk532sBOIb/\nsu9z2Ie2JjxBu64OeU3CrRMqDJuidzKbIKH4MQRS5NuszjIY3HZE2e5f4CWI\nn8w5cqmYEr/XyoYPt/rJfzTOZ6oIVO4BxlvT3H7E5uyyGCxYkvydwWM8TsEn\ne9rZJyeuxmnEnCqm2fP7hSCGdx5vU+YC+lR/eAmHoTeKlHOxsYBLvUBR8z7p\nnap/A78NL8fDr6ibAhZd3YqwMkCY4hQ1m7rSqwToNh9LavRKWFLiNbfJeKxe\nbEcc\r\n=qn20\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCsh2RfR3/MICxnPsRyILhfhYP7hkLVLuV34O3z0X+5PAIhAJUUhMby9lTZra207vVXIIBZZZoolRpn6d2E6MGDiYJK"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.4dec04af.0_1585945813632_0.003982999822468969"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b676354.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.9b676354.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.e84b9c8.0","@material/menu-surface":"=6.0.0-canary.e84b9c8.0","@material/mwc-base":"0.15.0-canary.9b676354.0","@material/mwc-list":"0.15.0-canary.9b676354.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"423f1ad2d234953804097bdb30484154440adc63","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.9b676354.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-+jILeTQY3HS/X5TGjzU49W0C6js1uAaAWzNckqQqCiO57BU7PSqZoadS92zcopb5cJmTwhc1SSDO1RjPr9hnxQ==","shasum":"1c699ec6ccd83156039996163243ae82058998f0","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.9b676354.0.tgz","fileCount":40,"unpackedSize":594286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5zpCRA9TVsSAnZWagAAAfYQAJ96kK1ALcoMpG3FvB07\nQS1f4q0OBmdGyZZFqBFBvru85yd9+gsE085gotioPuDvaqCexitUJQZpG+No\ntp0InOifcJvpI46s+M5E0a8CYFcwr+TPJ4patrSSmlstzCaLvY4ZcHhua9gq\nqgfx16F8i59nAyH/MSj+AUESJzKFOysFX6pxothhE/Gzxt5SgySKNHVa3HsO\nu7M6NMDdeS2wosQuqtlewM2vvhtX5jGMuAPQWfQk361Gsn4i0Yh9BzQgh4rp\nDN+cVCUoTX97/bpBpf/cUTIvAc/cVIDioF/UGWIgXDfQcBv02nVe0nKo6Cpj\nJ3LNYRdCJ7botHBOUh+e/Zw9wtwtnKAsvcFfOfnklok9YcTPoV9JnvYnuOCf\nSU/8N3nQDVi1cIa5A+NtQB6lrIfiUT2YjLTqJXLrU9r6Hdo7X2uHgywntz2S\nhbcYZ5P7aHFt6q2jGFWVYa7OBFJvLYU1XFT5jPpCiitVDSvo7l4Q9XfXIE86\nsDiMDGheChNcZS+Hv5cJMvDuui1ptCZvkQXbFQoDZ0PyyNSfgeWs9XRiY9s9\nAyzP5vNd4lcS6n+aj2kBvEdchsdWVUPtN/R927Iuynq06nPaPlwResDhHPpu\nEH2sB9+LR5UNxpxJdsoIlQdq7EJmbQy1RQRN2Lp/8r3fs7xfkmLA7mkqs0DR\nWiwM\r\n=N1Mj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBaVOe60o9195S9Q0UgUrOVRS3BVTBtkgHN0iVAWyJHlAiEA9CcFIruUIwny21jSSN3S8isH/2Fpt5kcm2dcWDI+vCE="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.9b676354.0_1585945832707_0.15040765384302235"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.6b946095.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.6b946095.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.f1f8e60.0","@material/menu-surface":"=6.0.0-canary.f1f8e60.0","@material/mwc-base":"0.15.0-canary.6b946095.0","@material/mwc-list":"0.15.0-canary.6b946095.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b65dfb6b4d3dea0ac5681487459f46352e399e2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.6b946095.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-BAkiDXmfCzm+ovfzMDJ2hu9wvLV6+XM45E0Sjn/z8ZaPp4V8jxmKTMshubY1kPq0o12Gw7s95z0NQIMT5g0CXg==","shasum":"aff9f26db51c4a165fd063a1a760b0e1c9f5fe21","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.6b946095.0.tgz","fileCount":41,"unpackedSize":612128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6mTCRA9TVsSAnZWagAAtJgQAIJv3r9WUX5kmVN7Din7\ndZoaAqO6u8CmGHNdX1thORP/DF48rfJjvcAXDATG4KmG5sVIozZ1VHQnGJeH\nicVLa1tStJXalhFZWnZdO5xTSOi94xP1CLTU8FIuCdujst8ZldxnTBjhI1OR\nGWt5jHw/9srk5fN6EG3eWBPN7rX8iVcQSPXw45cQhYPm4SKcvWKfNyHk3NOu\ndbVdrAU4hgSqLqJSilhEqcGmG4lNzJhcfOHanOBwlArlteT/ZhPyVzAwxTm1\nurz+nHxntKOv4IvbDyQeT6iHHRL/NvqhGklC7cgyfcIWSb2gbXTzivd9C0n6\nNmlvqOEhpncHpR2G4woxJqNZjsXy3Vjb7iz05UmIX4cKnlEAmGpSP37Bu6KK\n8iLCIcERn4rmf9ahWGqvrMlsmbLUiU1lEq4pi/gD8LNU9dIlL7iDEtc4jXpq\nqsV2rrGPjOPEOydKXKWDLsgBk9MXHZaBkJqu/wRWeaq3jivHhNB+K+Bh1wL6\n6z0JsAWyxv+UW4Esj0Mj2YD/h4o7sv8gpUD7JgeJK5vC1Z4WKlMhHjtREEWu\nSxEuHtkw0AbjsD2rKx/J2/ZsRcmo81s4D+XzaQlj8hhL+pMSaDaO2DGAYMlN\nGVhYiUihi/8h9UTv4uK55omOzXB2MAgZjdobKY0Sv9DfN3wpHxapJVwySbI9\nsU/y\r\n=xh69\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCa5mW8kkV60Qpnk7Dfx+Hj2/tVmfbV4Olg8v1yDCd8mQIgHpv/v9Pi+9t4KtGjxtVqbx+o7W7LxYd0Eb5dMWT0KyA="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.6b946095.0_1585949075456_0.422981689767326"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.5ccbfaa2.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.5ccbfaa2.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.6a40ef217.0","@material/menu-surface":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.5ccbfaa2.0","@material/mwc-list":"0.15.0-canary.5ccbfaa2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.5ccbfaa2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ffe6QHDceNOQg7yViZs3U/PvhFn3KNTOJilugP/qswTJzrJ/LdKzyDPwlBsh6TK652g0e4O1Fv3zzBH6TqzymA==","shasum":"33ba1c233e3a39beacc4300bcac7b15c37a01b82","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.5ccbfaa2.0.tgz","fileCount":41,"unpackedSize":612132,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6roCRA9TVsSAnZWagAA7eEP/3fjLABXDtMkvvMwg0SY\noP1oMdsuUpfqNoOG9OLV4VK3uTNgeM39z9WdUL2ZBciXunbEacTeI5P/36vr\ntSOfbgYCcIP/ZnHx4shmaJ2XNbwjipYQ4VqSYm9FthsP09g4ezfndindlStH\nPR2/9XnZayExAHzVVEWaMzOi/UPh4fjYdOaLPVWOXIHluHb9kSPGQDtxw+OC\nmRhzwVr+zZuI3KhjW5KgrNMPc1NL+t6cuRQ0QhoUKFKThhv5V7735wXdQ+km\ndKlUk/pku8FWHTQ76NNh8FFhhxR/op4Hrsw/yMqjd/yjqrEcFJ31g4IE2TUV\ngGCFl55OAMMoDJKMVzn6KbJ6MSs3mrwCkJqm+koBpmwn785rgN1/INOfAhdW\nKOiWEsfTtLWUsIRmYPbOBANxF3lVb2+ZbDFzvGbmYbVyazcFtAtfHS3xyjXV\nmycDMHGSZEDA2zESRDEQ8NuFPQoRTFh42bi99vmrJi0EFdsIQtYZ1fBre1eY\nV9zN1B7U1HMp/fUe11Mdgia8cFV4io/BWO5U8p8zSuXu/yDQN4vFjmdXBoi1\ng5P5KnUfIisrheuVch4IFXkYjimxMb32m0rFsk5UcvXB5H/U9pk3tGHeq8oL\n5gVP2ymJXr8UyMR7tNQO4JAFktemMLIA/XBsjMOVijSKMzzmV1WigQA6Ok3F\nO6gM\r\n=vqJ4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGXfiWNHPEwGz50vG8CA4T/356Yf/H7DbaP+kqp8koy3AiB6KUSSKlKj+UV5UVc9mg8DdAy9bsuFQVcen5q9iTJvfA=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.5ccbfaa2.0_1585949414963_0.3005636290182312"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.a0ab8772.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.a0ab8772.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.6a40ef217.0","@material/menu-surface":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.a0ab8772.0","@material/mwc-list":"0.15.0-canary.a0ab8772.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.a0ab8772.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-H3q0XMnzuFDnrf+5RcFczZG0mbdHoRyvEuVjchvkFQ5uGUMYFtibPnHutWL92u7IgahZ0J+TlRcZdKrIVxEl4w==","shasum":"addbba86a3537fe9e7a320562299bf3bb99ba0e2","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.a0ab8772.0.tgz","fileCount":41,"unpackedSize":612132,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejN3tCRA9TVsSAnZWagAAtMQP+wRt2nbdbZvHIguN8aOu\nzfATLz/KKSbXMKLSlyGFPgRHEpwkZ/LS3vGZJFUbx0uo3bQlCWaYPZcI48F8\ncgV/zJtRKm0L8Q03J6CyAks8CB48SwkHcS8cRowZXjQ6PVwbGAuIWblgX8UG\nCAHtqnys1xxfn7+4wsiTCCw8mU3kTPgqRcVVpMrt7b9lR5WOU7p7KtW6BeQI\ndTF57bMB2oQ71GXd3IoxTEnv+zKuiAtCwFdjzl7aus4yFQC2oGMhHcnERbZc\nbE0kXTeko5Ch8/XyFjGrs3oQaZRJbR91DAVdkut8oDt+0oXg1PqkoA9on+RA\nVmMkOkWsk0xz9p5H7RMU/LHOqSSQS3L6uSeOeuh19MxQ3j83fEfay6H5Zu3H\nQiwWdRjvdb5amwLjMMrJNP5ywGs0V4QJz+fmNpj7A3cSfHXA1riZc4Le7dup\nU+mXRaIDImE0r1z72/N9T9yry5hZ0aD9uRUF0T8DrNUnqoM5CXGIbUz4WXGs\nOfHWqOyB9NexbsQG+Np0CHHXJP40RWMWzyVvN+B+AVB4+dHBuZ7Ii5myDlPw\ncCFijy96iHf2SBfx2lPWvRuBx9edqAc25oYknAT5FG7Uy17RWDobs3dGQ/g/\ndbB0bQTvBYkIWSsa0KbuV4qLuGGK4rqdRBwa6dpHl0l63/wAwnsdNmU2J7/Q\n4XYL\r\n=jqvZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDkhZZKS9R5XsngUe9hhg7b8qYjzLKP5C/PaVhfoKze5AiEA6gVH4/KaAwYLJSJ2i4SuSS/h5zCOQB3X2pW49/lYjSQ="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.a0ab8772.0_1586290156940_0.973069849331607"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.8d352305.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.8d352305.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.6a40ef217.0","@material/menu-surface":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.8d352305.0","@material/mwc-list":"0.15.0-canary.8d352305.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d38e537751f3d38d903a5c7c03910a26cd301f20","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.8d352305.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Rpw6Rv2G9OIckQxaiL+LMwaURwnNSsvNQypCVCiUluONOlHoOJFycUmrdn1nAyN5RzKGtU878kuBKuKxOTCjOw==","shasum":"8f2cf606b04a89bd4040bbc82e8cecd81c7b7643","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.8d352305.0.tgz","fileCount":41,"unpackedSize":612132,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPPICRA9TVsSAnZWagAAi04P/RbqxRiS5+XyqLoI//eo\nd3ukovQ22siHZuSL/O3NXfK5zl0u0XIsmixEu7/NNBJrp9nB0JIUl/ZNd1Uy\nivwfnJaD1PGC0shunfqRWzxx1UKhJTMc1Tpn8YMSQ5kBiB0DimE+vQgbvCj2\nSKHMOfeHglId0RlPPwz+z81TD4Ljlh6y1gv9/GpFON+dTqQk2SijraYVR4Qo\nPauOiKuO++6lQoUp+PHzwv5Ad3iEMUxmh3l+oj7ESmUR3Flr5xaDry8rbFIW\nIVkS2FYiTrt7tCO9gh3GP6f514n313w7birsn2TsS2nH06tx4uyfigpR9V89\ngvtpqCmUzSIXdTo97xjQAdyqwRSjCyNLGMI3dQNSLRAyiAqe5LsaYD+gTAyk\nKTvOu0/zXyX1jUcPf7xwXFT1e2EjO0t90P7vICGJ91ZeME9fKhu/HXkYGFUQ\noTv7klDmaeyv2/iHTEwgVqI8uHWIzrcaNMUK6kxTdxismL5djQzlh2HMaQEW\nL9CT++dk8WZhebMonEJ7wxo8B+XUuFe5wG6ak34F/idmRrTZ6m8pIQ+1qJL2\n0z8jUfR/mOJTw8F4cZh/bxb5qsPgOZ6QOS60l+4g0zUuGb9TfYGVrxvnp2dE\nYvBmk2Dw0J0cthGDe5LIzgzFt2LkH/ADdQ2c+dbePMnTiTqOVFSJBKd1sSaP\nsDjG\r\n=R3b/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB8kJ3XBmqp2pU2eF4SLhdaRVJ+0+HsAD8JvIdugak20AiEAqZXYp2HN1eDri4BxU70z6kFTY1h5s5OHxWmDdcXOVu8="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.8d352305.0_1586295751850_0.37892820345784317"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.31eac79f.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.31eac79f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.6a40ef217.0","@material/menu-surface":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.31eac79f.0","@material/mwc-list":"0.15.0-canary.31eac79f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"fc47d0412882f860dc7dc010657ade07c9a0215b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.31eac79f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ioU8SMjp9DJoZ6yc3CCVy8w1dcsUSnZupwGa/ZxkvKuvKydEktYoH3zSLfhOCZrsFocQiJCrqbEZUl6hM+Jq3g==","shasum":"026c15c6109097e602244cbdb080dd6b2d4bf0ca","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.31eac79f.0.tgz","fileCount":41,"unpackedSize":612132,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPddCRA9TVsSAnZWagAARYcP/3AM3JxsmkjuPDhSY1q7\n8HHqc4wSjHLVB/3i+m/GgcXZVqCmzvYcDZ73HA2RrooX3lMcarbsHD1E8m6n\nNCG2UADhVMKfms80GBYS6jxnPlwcoIeqUncxQIkOP7hMd9/AklRjlI4GOAHk\nYv2FsuRQQgc8GXj3kwrxGQ8/0Y3Nehgqvi4psP9h/pYcfoudLFDxPnnl9LCa\nK/Km08T1wGhwtTxnW8zcJ6djlAuZeS0TQvKvAs2T4FglbsI29LnvOe9KPTmD\nSj+d8AupjrxpVbQf/zKil8phw/1cdVRcEQnk5qLT6fNqk115lC/1vE3imn44\no/vGfFs0AfRU/E2LxtxRvrEKYX3fFfJ+IJmTEvKhr0tsOB47lg1Cs3i9sr18\nR5EV4HmJfWjcQrCfl8Kt1caXgGNGHFW8zYlLeJDYnU5j6lKqH6ABQMEGRJ/s\nMtGIaydHi6S7jUqo+WAr2BqdGOtm57kPcBOZ0ieREw9HtDHDsXl3P6snmLW/\nFZjhO0pm5VX2MHMyOCmLqd8sXjCB96ybWWsJ3V9rlvuUXaO0B+ET4BqOzJyA\nvgDQSPkmTehaU8T1xGX0cz8DyZCRkTWIIbNVhE3DdlxHSRJiJCKJCLs6f+3Y\nadJSe9fleDvJZxv6oSB8C+WA7MdN4S7/9i6/6TF+hQ8grhAt06PEnk8ks2og\nY/z6\r\n=KwDv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDe8sV3digcTkKXlHLJ9rEZ5UGhxKyb/FRw5zRaYhO4rAIgCLkTzEaXxPgc7tBE46krWi3zZwY8F4804+YDQKFPymk="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.31eac79f.0_1586296668760_0.42783916230276087"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.ba05565e.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.ba05565e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.6a40ef217.0","@material/menu-surface":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.ba05565e.0","@material/mwc-list":"0.15.0-canary.ba05565e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f03dce4944b4b3fb02a1467dd03f7afc0b279a0a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.ba05565e.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-hSqgKbAZsTOqiOsMjCDAaP9VZU9eFIItfr0ZFKE+b8RFlYwBZxUbn/m4jDPeg+ktr8aht0QfMuox/r7TeRxA6Q==","shasum":"19d8efe33111b0038f77d5e94ec88a267f671e87","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.ba05565e.0.tgz","fileCount":41,"unpackedSize":612132,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejgrMCRA9TVsSAnZWagAAe2UP/1rPa9ffI+/lzBPbfLdf\nTEdL8sqpUTJccGTqIKr61eZIziRjyQ9ZZfAh8sPV+/WnOAg/IkzNGtdTAlwK\n7JtSrUIz6IupFr8ecW0aIv7r+YQEzAgfRBb3eQTrq8sY0McaTciIr9dtBh7z\nXqs/2Aszz8iQRd+B1n/A39f4oJiNS87IrX5tRLQMQtdwhuyeRLEl6p6ppxTm\ni2mBvvAlYxUlyygvIAlGowxHGukMj4AAvuyKii6HOazadryDiMZpc3Gu+Jl8\ngNLy7n8aQo3dvpplPNFzEYkKBRdz2eGaXcvO+k6JH/5Eo5n35Tmsu/L7nNyf\nHXffBpPWW3IJZPJp+MTDK5BPEvjR7JJt9VzDcriNDOhHkkywM76vOoS7DrO+\nqzXwa67KH5AIPQi+QYC+IvqvGdmzAZKazq7Sy7vitdnJ6Q62Yln15I7Evaoe\nLYWM8GB4evczeHTkClZ/LPXZy4WzSLiITgmgAN8yc+0/PCS/fZa68uybY/Uj\nlwkpbgNSSRxpkud9kJ7hPP7BRMub4Jt5bfR0ql5VhDsmrZb/RIAs0drrD62m\nD8EiQvA5FU+XsIg5EeLp+f2WlJBwQzfjlBVo757p6bFP2PJ9bLmOVTDgtzON\n7gQvNSMoiNappIOTUM7YIyl0eo7t8RbVAzlAbc1UuY75Mx7rKDRFwJ4zEgZt\n0RXE\r\n=urVk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDLXdnphzX6KOYX2E4xjW9dM8l6BnXJ26UCx0OUHWLhWAiEAqBcHyg00eSCj7Z/ZeIsabWK6XO1dV1KC0Pzuiw7DLnU="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.ba05565e.0_1586367180345_0.704395677341471"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.25099f79.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.25099f79.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.9930d9cc5.0","@material/menu-surface":"=6.0.0-canary.9930d9cc5.0","@material/mwc-base":"0.15.0-canary.25099f79.0","@material/mwc-list":"0.15.0-canary.25099f79.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d2069c5f3f79653f2526d8fcca853faca1f2cba0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.25099f79.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-mP6+Bq2Q7vvRK/0HMRdmOKJ3diWjTfSk/fWkYG6p6wG0Zc5oBNLiDwRdKMrYfqPyqOhnjFsdqlP/HJAx2G0UgA==","shasum":"4f009fab1ad8085b508243269977f604a5a2ebc4","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.25099f79.0.tgz","fileCount":41,"unpackedSize":612132,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejkKYCRA9TVsSAnZWagAAL3wP/3jDyPtQXWn0wqLqbDFs\naqFXoZeXMmxYkBSgleM2lAJbl+GXTX+yB6tUDN5oCmzCt/DkNMUTYSC+RGhS\nMV7p1evhmgX6Y6biN1ba+DzdRTf8srPbhXW+02a9BLusxptgcMWBQFTFO7Aq\nXE/uMzniP/61vhErZIbHLdh+hy8iPcster0/F8jsmAl60zTnPOh3Qj3S0iBw\niEj5qICih70533CHANx49LsLqXv41D4Q0dyQfwDsIz/o9UgICCLigHwMYSBE\nkMx+yGw19KLBvdbEkhAzd6Nxs9rDeGqems0L9YPFDUWsi9Oyx+Jz7rSaT2uw\ntm840Ip/lsdHeuwdaWrcPtJonJYY2E90lwbqMumzipsL0ZmZsOkOnJypIO+K\nVfpjBg545VH+CzJ34X/5btnp9ciHK8eoXZ0F/2ADZjuL/eo7111xToXL2hm3\nqvLEqnLXMh3/kKOidwc9dAVgbhfzt6lH3WtizUNtqN41mDjGbhdZ3/Gh4Vtf\nvTo2FtXb8JQ6TJtIAyvjGM/wqrMaYuMCjRQ8fug0uEptF3MGSgegDqM5ekfT\nJCwGFxwbTUxcsp9XI3/XGlFj/jVsUtjhDrU6gOWRxRorMITumLSqBK9oJcab\n0cHJIhNWgZsUfhpVDlGCW9kADhUab5R8rGA3dnCTSKkInC90jQbs4qpIrhTh\nXImQ\r\n=3KBx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDFcQ45It7Y63FP+YvbOqyJivE0rPLhkSfDaB5dNPx6+QIgGSGAU9PwT28jXVqGRaw1VWCkTBZiAn3Ok3pP8iOqRcs="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.25099f79.0_1586381464192_0.6623371283032022"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.447e31c6.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.447e31c6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.9930d9cc5.0","@material/menu-surface":"=6.0.0-canary.9930d9cc5.0","@material/mwc-base":"0.15.0-canary.447e31c6.0","@material/mwc-list":"0.15.0-canary.447e31c6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"948dcd3d057312750fa0c58715c74d5ae576abb4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.447e31c6.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-wiTdW4sRJyzOE2D6RSRLeEeEyU0CsS4RwRWomcwMBCEg49Eo4SnNA+391Q+ZK5/hhqEo1o4zv3mwgGnfccuoTQ==","shasum":"40c52eee6435247e92a8a433fcb91eaf9fcdd08b","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.447e31c6.0.tgz","fileCount":41,"unpackedSize":612132,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejneLCRA9TVsSAnZWagAAYTMQAJ5y3WIRXp58haFuOj0H\niUTlAqfiRFcN62mAJiLDs1IH/6l58vc8g4KJQdUQ4M9tHbgWgKIDTrnhLeKz\nAbt8c6Di1+KOuhDTjF5kT5fExi8x8v1bRBXNnITWu9x4SlsaehpdqzD34Tnv\nEZkpW4yoxQCIGHVeAeuADB8KPrWfWZHVgR26DlPss2wgaTaF2DzDK2a7mT65\nkSw3qnADLDs9iYCVZMThkhzNyG8uj4PsECsOHKTNVYBnRG/amzvZg6xEjDDN\nbIJm9EsxGHXvAdln5oKhw6+8VyE//M7kE8VNJxgyNh2aohFdIIjz24JAERYK\nACkcJP/jj7UlOBZZJBdhXtEEoBeNFMjl3xu1qYSqANY+au0ZPSRUB6odk2dn\n5d91qZH1bkBPSveUkKnHmMAlf5u3R+npe+x4ELrluUxixVvA1GpqsTNWnCF7\neBIm+eGc0JcjK6urDisMP1+XMLMOXxMJ114x8OjL92t7UoL3oMFsed5ozGUW\n1vgLpooW4y/erGyHrok/SKlVGAUJWgxX4td1Tlp8bvBfFVlh2+SCUR7gPuyI\nHiX4oBXkgkzY4tWrxDYDrHBgahRRL0+ZYGACApvoZ/ESRVCdToNt6VJWm7bL\nKEU76u2NdzqnH19THGFIKwAhy+YpD9DMXUem6CqCQxTwxfjc01OopYV+BvBQ\nKqHt\r\n=x7ms\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFYfVQ2sT8kaTIYr4ylELb8U1x/2A+y3yOdJz6arbdVAAiBieH0uubPU8+K0SjYRWqG+ky7DReMquCRrDFeFeN+JnA=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.447e31c6.0_1586395018618_0.1549098737846346"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d6dd84f7.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.d6dd84f7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.05f5e1583.0","@material/menu-surface":"=6.0.0-canary.05f5e1583.0","@material/mwc-base":"0.15.0-canary.d6dd84f7.0","@material/mwc-list":"0.15.0-canary.d6dd84f7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"74f8e8617851a447758cb395b1e8bd3bf4c8c323","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.d6dd84f7.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-AqmaU3wiwOigTf3vSIIdI5PMG5cZzJH2jByB6yzV9hBT+k6Q5Y7fqoStn0KQz8WinK6G9tMhYr1E39WRctJGww==","shasum":"ec8d2c09d4397c40bdfff6c26e9650e71a033b9d","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.d6dd84f7.0.tgz","fileCount":41,"unpackedSize":612132,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnmOCRA9TVsSAnZWagAAhjUP/R/WmnddYByDWoptsla9\nzXbP7NYf6tRyy5/tg197uxipYYfsloo+imbS+ZCyRHLmdyutRW2yJwvnGZCT\naij/QkzITaLlhYnmxhokf6ll3QuHtSGLaXzXQc+D99JEAGahBxo5GbfY3YIS\nQUjy2E+dRkCPDUut0tRetUiut8fg6AUIYn67hivDkHoHRdPGCF6Pw6Et12bh\nMKYYYnruOz9/25+DrFO870egdrQygFik0SyL/CytQ7v1gHjGBhJtThGmPTcW\nkt3GobsavpjJzpYEihtVkOMd3CFsL7iW7bh2TWNdZOO66pEskNeE9tyhugsU\n0fCRa9GOCn2S5WgZ0/piJYgbq01epx8XYHvuqsdh2GKym9SN9A7DlOO3vkbd\n80sOHwyjzUATWW+I0B7i9jA7N4KgF6F6Xwhj3SgzGtK81HOSYhUgxzjY6v9/\nCDb34T/OYQ75lZ4kidE6fx8isIXyy96F+Riq86ZO9d1dS6kFEVK+uAWLVGRq\nPUKWYjGxorNI4QHQozKu9WqyjLEiTNZmGnuON+xCh4ZkjvosAFLGARgxBYTD\nYFYg7jPKzWR4Cbz1AqZOsAJuEY045ncCC9wcbib0jBXCXuyANQKiFDP9WWYQ\nWpS2aNYqv0F6BxdZGIjdva5HRk9arM8aT//fYSUq+o7KFf6vFZoyLGi2xZMt\ngc7W\r\n=+n7n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHUPj1oaJUbir1gLU69gOz53iuI5A/BeXWz8RvKSioxGAiAZ4+9RVMfHyuy/9Hxz3Z0K3+FBJYhPPdyMzqVFwaAafQ=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.d6dd84f7.0_1586395533479_0.30140827827711303"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b03ee68.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.9b03ee68.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.05f5e1583.0","@material/menu-surface":"=6.0.0-canary.05f5e1583.0","@material/mwc-base":"0.15.0-canary.9b03ee68.0","@material/mwc-list":"0.15.0-canary.9b03ee68.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ab8e352b8af06379b151d5a80b316fcdfd6e2024","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.9b03ee68.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-pwmQEa0KTO06kFZ6iVDRhrGtoVBiKcnwdXWMc5ZA9YQcVUTMJFdD2AdvJbM7FllHpyW2zX9zut0PZWELcHMkWg==","shasum":"2c2f08e1d0a65be87ab200c224e221f9b7354347","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.9b03ee68.0.tgz","fileCount":41,"unpackedSize":612132,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej3+FCRA9TVsSAnZWagAANUwP/iI0YiNeejUH9AeoYmHA\nxHu+2E/dwkGQyzGZhAchShoPIuC1yCRGhYVeEYhoj0B4foj35VplFeXDRoRt\njyRvDLPvyR9VtTCYh4OTlJm83ciHHvX44iOGuGaz4ANcvG5bs0stgOFWQyrm\nnvhjsuk75EM5d/OwZBBzHlFeOxH+JcNl+1spXNTN2yyv+VgvuL0JZGZg9eO9\ngZ/IVOjqDf2qT5raWpQxsTGdcVFPK5JNghyJs7qkEC0VDjufN2tQ0fakpSZv\nGuXu7ra1g0+Msq9bwJtKIujwWyHKDp1fowWv6xN56A9nHZ1IEN5g0N//pIJF\nECy05HWUWrFMds6oy1exhanKfYYOrZTKUtK7n0fzkYFP1AzHYBftBv3cLpf1\nY1dce/3tE4sAl3XnsTND1ea2rwDsR/+hZDvewsP9v/jelZEnVKPIoY6cOkHH\nSzQ5n4jqTn8nI/ycKjGVkUEJrCmI/xOysit1Jpm7dpjS71QNr4JKlGJQQn54\n1WeKW9gSpRGYZacY+QAXqYlzkj03VxdiQ8FR3n3pS4Mk498yBk+5mer5oa2U\nfp0Ir9lLBVFdHvAarGeBLC5DIKS8VmcHUixUeeMQy+Dqe8vst8yt32SieGTo\n3NCW/+OifsJj9+/Cq+oeCGxPa1ZLBLakYgHGREics23LxAfCwGKdGuV/ZDOD\nBTHl\r\n=u+Bw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8NO70tXEu6qQ6m8xGom8vLnQNzY93+nhv53VFnvgnWgIgJQ8wqt7sD1LomPrkg+cZK251/jbgafGEFO6U/lQ7T+o="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.9b03ee68.0_1586462596483_0.8515800847655559"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bbc25b10.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.bbc25b10.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.05f5e1583.0","@material/menu-surface":"=6.0.0-canary.05f5e1583.0","@material/mwc-base":"0.15.0-canary.bbc25b10.0","@material/mwc-list":"0.15.0-canary.bbc25b10.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a56f18fee2a99903e5867ab91175e4802a21cad0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.bbc25b10.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-CUFw9JKSum1W2m/aV5DVlAQep7otbJeTaFzVyF/l+r0bX9fZe6mOA7Ia8/mnTlLpVIMEVjJPS69WLB8sW02IvQ==","shasum":"090a810ecce35b1018c65b80fdc339660f9f3257","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.bbc25b10.0.tgz","fileCount":41,"unpackedSize":618578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekPcxCRA9TVsSAnZWagAAJLQQAIU62tdOhGEdSmpudG80\nj0ywuPKBRjkNQG7k4IjC4oLRdRNOOat+bknogbhdZsjL9rRlzB7qcsHGSn1B\nIaDqovtp+VeVxxay4jdo58pzkDTo6x2zbcBIhpoGcKmpWZE7GCvLRfWtn+9a\npgSKZm6f9tXOzn8ImLckNxhTqqzB8l6z5xLnC5kKU+KDnjExxVRqyRz66u5I\nreY1s8ZJBGDkgKOEMA/bZwny/F/Qv1B4oBPgn1XW+2aadimmINd04qOB+ENB\nKd470WPFbpzP2ZgjCStFF/MmY14maE20YJ8Q1djnXICLw+dfZwC521AbiNY8\nQ7Les/SFg/oWXcQWF9asUTBkXvm9JkGUW7L65cRFu//FTwD3HMTBYFrvq5pG\n9i6fFNjvTd89WfSrl8b0VEC+ZRC+pj9nt/JhP7hYEXkzrj7QEsel34vsopfL\nX4onXI82Jqij3m77QKBy70uZ5JNi3kgKqDjtkC9Gttv5Jowpb44zb1m1gSXG\nxTQchmHDOH4A323YNP0yzZXOjz9OU/v/9g1vZwy1GZ0Ekdt5KwOUbIqqiJTW\nVonW28LMNbR0qkLNn7nO6XErssJQCCb/QMo5gt2Cjps7SLYLvS46iY9K5jQW\nzXbRXYd9dcevhKsBlFotnI7Oeq3CeVVVcp35HNLs8r8LXRSy9y8mw+HQEnBZ\nkPCP\r\n=GQre\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2HG/1SevmyCIsblWOzRagcIJmsw4dLaVn340cO8a2bwIhALDsaNw/v8fRDduTUYJJx6flQZO4KMb3WAGtJqO9nTT/"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.bbc25b10.0_1586558769103_0.10414629871225145"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.339cbfd4.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.339cbfd4.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.f172b0f90.0","@material/menu-surface":"=6.0.0-canary.f172b0f90.0","@material/mwc-base":"0.15.0-canary.339cbfd4.0","@material/mwc-list":"0.15.0-canary.339cbfd4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.339cbfd4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Wq6YMAUSzxLaYb+5gXyunmN8ZUI/NVjdD66hZjKD4H57BlwK9psAn9z4Fc1h4ddedxsvzuexE5Oz5pbclGfNCQ==","shasum":"94a644dd2dbb280de693f9357458e07ec0a67629","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.339cbfd4.0.tgz","fileCount":41,"unpackedSize":618578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel0a7CRA9TVsSAnZWagAAbNsP/RrB1uiCzFFmYfj887Si\nkooA2xa+l9f4HwVyHjB+u2GzRdUOuS3McSy2cXmiC1KC1WFiTztWTs48taUT\nM4ihjrfDgb/tOkTuRNNc6ZjbRN1z+rNNTeVTlztErMC2h7m7N7gPdw+aJA0y\ndQOy3F01Sw1TYjyyP32kG+Qsx44mACn3WH3REeFkwEs4fXo0BERcyjxLTp6o\n+l4ZmvTjqw59iVZgL23NprBix8LvSi/+DYn+UP0z9jOmlClj3pZdVSuJ+0kQ\nc8HY4lsEKw9e1kCAkChmwFS+2RcWIH3I8E5a12Fn2p70plGkG5KDT8+PHbJy\ndzNkXpgig/bv1TZTM8pWSJTZuyvGIdVsIyFyDX11bDxKR+ws1ntvqJ9BXhS8\nzJzRkueRPTSLFrV4ZvbZSB84EFQxCxnjspGMtGAjw4UaSb26BUHf53BJcu5N\n+xWTZRYNl+X64PANGllqjHaS7PDol0yzG/NtS0uO4Jup09xdRb5We0+kCI7v\nspZrzjMvMHyvSEJIHDGgKr/09tYrg77gY/U6st2knhF/3b/a9IzR4TSnNSev\njNM5xVGI69WURUJMOh3gqXKuLUxBeSgxRgQaM4AWZ0z8MUIuBZEpmIHESgoZ\n9C9dZpdIkm3o6mQEzZNdSRlPnG19GE2zvtqpai84vuVqkpZ8+bxiSKoTx27g\nIIyR\r\n=+VzM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqPmHjdqvk+bNTqxC8MsCdnLIA8lEWrIomh18qxq9fjQIgWQrgs0x6m5J2Aett/2UZA6jBIACvJ02YjPdQABD5sq8="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.339cbfd4.0_1586972346876_0.6885284077188418"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b74ff19f.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.b74ff19f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.c02642273.0","@material/menu-surface":"=6.0.0-canary.c02642273.0","@material/mwc-base":"0.15.0-canary.b74ff19f.0","@material/mwc-list":"0.15.0-canary.b74ff19f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.b74ff19f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Tm7JEbL13vYn+cwltJ2q4Brk41GWP26jhonC6YCCk6xvSOB0wAtO/+Ud9bFBn7Z45kA35rg3TVU5kdUVCpB51w==","shasum":"da32d4a0bb7f48d3b42e5c83fc108c3bbf3be1ff","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.b74ff19f.0.tgz","fileCount":41,"unpackedSize":618578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel2jhCRA9TVsSAnZWagAAQQgP/3hd0labvmfIdF9TUnN+\n+V5+luupcQTFOKtbECqQoQdcgs8Ay5ltEpWncWRDO9Moc1DRk+B5WMdoWtPo\naPXeP9c/Dz5Q9EZLznGCGWYegtEYWP7OeTwHfe0ucj+pRYVXfvtrVuS6cZLh\nKg2OHdduxk9owJC0zECHVIA3kwV9h3Bfq7uxpjZBz7AVcm9VDUhfQ5VpZaZW\nEV4E5jrom3yS2DoZTdjToiIq6Y/VcRoAyl954891RBqfywflkK1LUP0TBOOI\n+1BINI+9ml35xexbzX8tDkBd+DTXKiM1fFA4BpeEt2ShqenYMNEnGG7oFtOR\n/jGaOJmuE+cjX6nkzN06STbh6G/naljhtulDJBQdKXeKW3EjyPBVORQPr4wX\n6fkhXCNSzM7wKQmkLWERvTVZ6/eKDf46A2SdAFm1NDUNp7GDlEUcp5tEdcyV\nPIM9uGX0CScQ6i9/GLH8/mJ2oNnbVQ1jbcezSuWxj2kgnpRHIddLK2cNcrCX\n9PlHKGPAcFhnjSmLqQoRzR/vgFadulLGMcDWCED6evfu/E7o2up9Xn1O7NkN\neLTK+wI+Gr5RKavDqyENLrIbjY9Z1eoFZyTXC/CzbgIErEX+p6PTcPiui3oP\nrzAu/hnww4/fxdzrysOXialZOavp1MHRMVQHAT/+7vmf1hXJrsQR7d4POHnh\nlye5\r\n=2kD7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCoZvJKpdnhleFQZgkFrgiwAvjXXdiY8D2WLvr4MrnRAQIhAP7zrE1hh9erGz4+aLw5jZT4R2Sl4lKm7RVcHf7Eb2dy"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.b74ff19f.0_1586981088897_0.2577271703359729"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aaa16853.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.aaa16853.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.c02642273.0","@material/menu-surface":"=6.0.0-canary.c02642273.0","@material/mwc-base":"0.15.0-canary.aaa16853.0","@material/mwc-list":"0.15.0-canary.aaa16853.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7546404b77983a36ca5e25efc1078681498f260b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.aaa16853.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-9bA2vPQs4hTA2c+AsSM8poHs9faJXxlzuAQLOERblAG0fOYIjD5V/tAbffxkbrgRLj8VzMBbJpVZHCKlVzsmgw==","shasum":"9adeaf884049dde5b364e1ec953f46def827f405","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.aaa16853.0.tgz","fileCount":41,"unpackedSize":618971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel42XCRA9TVsSAnZWagAAX+8P+QCCFiVvi2PAHO9PGdiq\ng/QclcmP1WrAFG1D2Dftlq8zFohpFmxGopyi2CNX0PPThFusmTvzGF1CTw/R\n3xFJpt3e7hMzCYGIhWbTa3E0HKmkLHcPV0AMfPWsuA63rgbRmWZul7hTO2TF\n43FcZfe+sBb2VfVxqLICMuAGxgy6jbI+NXJXUOi3y46kKhKVvAeWR+qApwjI\nln4iAnMjC9y4QQ0KXXVUTEagj4zjzGtogQ5+KnubuHOWbzU2re6gC3WpO2/Y\nisQyz8QFiwZPIOXYkSB4Gl1rnxU76JUdEntV6mJaDOqnaMohL3QvUQSi0avT\nYjmKpdX2TdsL+yVHujjv+X8n3mHOxEYJc5OVCCPs7j7ZqgvKnKO7Zy0M6x7E\nCv/OBo6E2UCc0p3e30KpRrvZdugBdvTib84n8IwS5YI9wK2z6/AOqQUnhoTQ\nmhDJ/I/M6jCisvPrdbKfVJvwlVoDFdvqq+Mt8SNDFE5nueBnKYGWWbcqDHdo\n7aLxrCxrDtuVjcPksWktEGlqXKkKY1/lPnhtOdNHjNDkItGjFIdXTxhBAby4\neYKvV9OelPrDrZ4zZALkYRYczItMtewwVzzX/ONQ8PyGXS0Bq2deoYO6DJ+A\nE0Fchriy26DZtTiFUJ2Aags04NE0T5xfm8z9qDV6QMSlkSFWw0hmtKDjBFef\nSoF2\r\n=A8RK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC5+PQ2YFP+Vq9q5ud5/0PbDDIY9IWeSYMdUAkQH5Iy0AiA/OXJyVB2BQ35bSZ5jchhRz8PCZLEMwyFpmCOrmChJwg=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.aaa16853.0_1586990486589_0.3377855368865188"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.826b23e7.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.826b23e7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.ce6cb7024.0","@material/menu-surface":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.826b23e7.0","@material/mwc-list":"0.15.0-canary.826b23e7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"00403df32c75dc9e2a64a38be1eb1df45ecc57ff","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.826b23e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-+hzoL9Ax47luYuW95DQD4gprThooaC1u9PzH3oMUf6ggMfU5kngfELkrwmrO1U1wk451IOxPvS73WKZnq8haOg==","shasum":"1d54e6230d60db47ef4fc4124f23f0980a4a663b","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.826b23e7.0.tgz","fileCount":41,"unpackedSize":618971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKqgCRA9TVsSAnZWagAA93oP/1SUVUUAYTiptS52fmyg\nxseRgU5VKGz8AIw3tZ0DshV67JlzyIYgNNgjX5yGppahiuqHg1rt15/EwgJr\nHhArmLyBNkrE/qlg1XLKW6CIPWshlBkCUVfnRUX4r/7r6u5fKi/cu1Kujo31\nlAmrMi++ZzoiTRmBcTij4uc0Yt8K7yfLxtZ4i+tK/ECke2jobSGVly4qAKAf\noNP336q9djMPRf/zZK+Biqnu5GSAF0cnHGHsq+9MiNbVotvGHltRkegHnsqP\nWbfM+7NaQ2LyGWHHkD+BMCklSfaaw/mUEvcsi/dXgEHt5qUS6GftEIDwRTSv\nkQcu6CDEIMlhW+wp/QcGzf0Bj68ZsEa8FML0Xvk7kT3SIEykqJ6gUkaHTdYX\ngoF1Y5HQcBjJvMMIUJGy0t7Gz5iZtp4q1ZQSCp1phbtscZqLp97J1Tg+YhuX\nAoGmFbCA7U+2Eb33YqQT6kbNlRPfDQVCs6+6CCnSRc+qxZ1D7TuqgOigea4K\nw4ezhEB3GYH0XkoNSGHm3P1Z4OULew76GuU+AC9OCY/tE8Sa37qM57r9De40\n8T/jRkoKMRs2+wyteKiB1BsZQqNpBiQ5RwDJKpDLhCnbiogxmlX+gmTlezmK\nRbZomBKih+4ZvFm75jZ1cAwT1QJFIuwh6UZt51/v6dxXMBcSxj7xjD3lYmXM\n98B2\r\n=2DKx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmarmeYyoeLgbWACA/au5tpww5+PbNYQDj3941PFHcOwIgH+Z/4hIe6wHB4JW0S5JBkNp8itqin+OmxwQmxcj4gEM="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.826b23e7.0_1587063456114_0.6911099247290744"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.e1ad2b2f.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.e1ad2b2f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.ce6cb7024.0","@material/menu-surface":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.e1ad2b2f.0","@material/mwc-list":"0.15.0-canary.e1ad2b2f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"148a509de33ca1ac17781a9e24bf8735ec5b2874","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.e1ad2b2f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-f5yBpjdCR3ftpDnAVgYX0B+WcDemehjuEpLi0on3pgPRKCz6oUcDPcACN6V1Gikzt19g9KUby3bihSmjQ6tF2A==","shasum":"10ba34dc16b998e4ce59785846d0f672f0aca95d","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.e1ad2b2f.0.tgz","fileCount":41,"unpackedSize":618971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjViCRA9TVsSAnZWagAAv6MQAIbYrB7aPofBJf5xIVze\nveoEfmHHThQskGPnM/TWbQx9tYwb9pXFc5SoTwSF3/XVAQ7RXo7cgUkhIUuX\nra9SBk1K+xwXbikpng7nioAaHobEIzNNnoIKgEPyrqSDSwptS6uSZbx7unET\nZ/vDGPsckrPogZUSXsjTfezFjv/9ndqfFNLaCzpNXusOZO6cezDZ21M7Xj1a\nGn7EHqwBeA39zDZOOcyVOMqsglA2qzz/zqwdjyh2WoAw/8DmZxCQTD78DxW9\neC88n6hlOMT8groWgopCfUqeSzT+ZMDezqnURiTcQ/hAqHLrhioriqIFoKtp\n2YbVT8rfuJ7c5hHOzlKTkKCi6dTlKG0vhbNtHolGnsdol05FONJah0Y6bFLX\nfoKZdg/EOaM25n5runrHNuJwZXnlPd5Uvmc6qMHUZ59SKUbh/H7ag0Rpp4Yi\nNq6pfOAIxglbionaiO3SW9a7fOMljDdI3FKun75NiZGO00AqHdaT8P2E0O3f\nPGW3VMR5TRQj4i8wlEC+RqyhHVn4x0ARyte3hcvf/A6YELF6GJCu2SaXA9q0\nDCjtp4i1BIP1n6VS7aX/yboGyBpruZxdX8yI1uJiuQwQFUR23TUefI5XgT34\n/6HLJrjdNLxAzYsYVcZUcSN3Nsk3Dyl1dEebFGFKlp66Aw3rlStGudAR20+B\n3nQv\r\n=UaY+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH31KHagOraZ5JnGVzcX4QB1FIPlht6avGxg/QsPw1iQAiAmErypT7EH8JZOkZzska8yuh/bkUTsGqHgsCn+R4QTHA=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.e1ad2b2f.0_1587164514174_0.8402026793413766"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bade5580.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.bade5580.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.ce6cb7024.0","@material/menu-surface":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.bade5580.0","@material/mwc-list":"0.15.0-canary.bade5580.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6e463a20777b8cff5146a68db7bffe3f5aa9674d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.bade5580.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Tu+SjhavYicw24/mihyZ9In/llF6x8qBhoO2BKh6EYu5h/XltFxxY+731GSa0nuc/5SO2+6mc3AeSU+CwIk6WA==","shasum":"5d076276c579bbf4cb4c30634afe3c25f0af11c4","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.bade5580.0.tgz","fileCount":41,"unpackedSize":618971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjmMCRA9TVsSAnZWagAA8fAP/jiY4Dmednj0QPffn1pD\n8YjJlLBGX+UJa03v3w+D/ITGqzQzn6nLzpg2Vqw9q/O5fYI8VJhCKHBP4ezc\ndF5bLn7AcBLVkGWG4OPvX3/TtW55IUleAXGCILgJvk5ZxYaCTZIQeFelvTJe\ndyowPvlWqluEtnFXAOnT/zZ74sEljHlwGKrCPkWID3XKk6HsFW3IK5GjnOPC\nqqHfzWHDiQEdEwp/FgTRxQJFYKUcw504jAJXeMgsbu6yiKDJTTn5fqAwX6gU\nyqFB1zLR3wOKFKZysR7xRFtuZvdrRWZmQVGTOK6t5jBRgUXLE+7LvFzaKQnu\nRVYkZplGjHcCp/W0VIATxKGUCBGNFElMQK20IM0h47OclJA33Hfzjoav5Dx5\nEj4jXDPEQC7//KKQh8iXNvgCkYD4szghr7rUehI4Ye56Olsh7R27+1ZK4taQ\nJuAHPy8N7T4TjQe1O5gJ/lUymEiMBGmwmkmCa+eVKuu8IzHQkixBnG5M81FT\nVeHVXn905qbM9GdPYhwLfOC+1eheEUMlFXo5VRHFNOsXi8Nbb8dHWu8WtvWV\nwegN9oTGTKW1ThC/whAxYO4PpR5Tag7nyseLmtv3U34ltAUNsTyrLbA1B7dS\ngLkXYkPNh9qSXZC4NBey9vY6Rf/fRiPiAdDxZ6vzPxrdhugIpzTQ7vgCMcPy\n0FZY\r\n=kg2M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAgFGo5T2xtVYjnUD8KAuVbmGzo0/djqAApUAV1NXVLwIhAKtZ3iPIGIDn77tVWFpqFXfugcdi9jYITzvi52bIDrv6"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.bade5580.0_1587165579992_0.4843775560803538"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.dae38247.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.dae38247.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.ce6cb7024.0","@material/menu-surface":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.dae38247.0","@material/mwc-list":"0.15.0-canary.dae38247.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b704c816f10599ee9a5d9b89a55d9c95d2e36f4e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.dae38247.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-a2+2djZgStU4KYhSS4QlfPhiAfX6ElKbCncKtduwT0n1EJuhlCYuaioDfov/NXrtITV9UeMAZ6B5+JkYMUUIaw==","shasum":"a8bf44f74571ef7df24bfd4c37b2906e38595463","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.dae38247.0.tgz","fileCount":41,"unpackedSize":618971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkbiCRA9TVsSAnZWagAA0/MP/3IVh2zN4rAOYOjZ8p+c\n/JQfkTBTpoZIliKU8HhcXew3oQEwHUp/jFZOwz/2/xWpx8LTnfM5M6F2T0s5\nlZSdYgDRGrGGAaClcW8YAXfJj7EAKCcQSo6evZPih/5GqDb0GETQxkLeDnyW\nNzuGpPXXklSPoc17D9K705IDNdxJw21KMa295di34M1PG8jVeyzKU4qTWGRy\nYeEjY3zRLZA04PwrnyELm9nOnXG8ofaXPo0b+6s2zazjtYV3fiesjY/T1bHe\nNk2vihHGyYh9HUoAwJFItu9hL4WoRjTKIAEYc17CDuroGPCTVOAK0mOkObSu\nt/6bKYJZ5lGtAEyPIF+drGQwf9RXG/n/qSnqHJtj2AB/jx6wD4jB1HNcTeVC\niHgVdx5+4+vXUYt5TRtGYX6lcG88oAlazpKI3kChj6HZEmj1s7LG64jWUBRD\nI5QBmhE3llTlHCLkBTmP45TBZvabrjOiGoT1nULLCk/9DSB8VZYx8PcxfiH/\nc8PATXGlNH25yYJdmPmjIL+PYwQy+JczdoULix97ZLN/R2SdgAkf6EuVpFKz\ney5cH/fTBzzAcuzYCGc9uHdSSO8Dk2nV8A32GXaEM7Pn8BUZnLNIDz4Gy52o\nw+j79a/XwwXbO2BVSjXfio07h1c4MWEiuROidtvchNBTXXnDSjnw0TzgSFPJ\n1TXG\r\n=0Ia+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCIFBuKi9eCn+wJO/Ftv6u7ecUX7o84qqZBUxLgzvDg/LUAh9LUbNFkwmPQeLkii6S+v3uDmubjlXEo6TN/yM/FXHx"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.dae38247.0_1587168994049_0.14628089459548232"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.a04c0b82.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.a04c0b82.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.c4b4bba96.0","@material/menu-surface":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.a04c0b82.0","@material/mwc-list":"0.15.0-canary.a04c0b82.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"23904437ed2cd67305827b08d512e6dd06858b16","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.a04c0b82.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-iyiS94QhLveW36tPj6iq/+UV4lEDLoZc3auobySRdmeoG+XAiKdAbFrDA2jyogER7ziJCsiat7GocXhFtsjQTA==","shasum":"e79a178b454ce5aff817225db9dbd8485e1be814","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.a04c0b82.0.tgz","fileCount":41,"unpackedSize":618971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemksjCRA9TVsSAnZWagAA3F4QAJJ3NDl2jyxk6O3Mr+k6\n6pYQGji+omPL0vplboEENnT38/NqVY12F/cY250QOFpmoe2YZzFzjTUFUo05\nvWrzniQHJ8rnsXIlS3Ip25MLESDectpxmi0gfA2mzv906Z4xyzSDUCRqDvd4\n0OUYvlARXjUwAn/bUAjXrXCRq8XaIyZ9rlocgXi/jRHfw7/b5Hik5gAf7Voe\nbqCWQDTtCY8TyDBWjrNAo+eYk3Avfkl/8iKSpdn+bqiD0ogS8wa2dw/XybRL\n/wrdHPylAjzoBUxpE+2J6qES/+1+jaMxflNicLzKG97XK2WXLMz/oScN+V5X\npbHzuQCfbcQcUOOpZ9eOk1nV+M2n+uoq9jgdaTOoLXSo8MV9zj5l1G9EUAjP\nfaYezmMCXzKn9Gg5axlyP92ZJdk2ZnOVitcOSzmB8pCxZUKS7p6ktWd08l/d\nlBuQATxis9drAAAh4V0cjvdySFSOjFixaPSW6rrkq4sBWhXXj+Kx9LWJpVwW\ncqFCt2jYbg8XlzUxVxrxoIb25VGD42h74cWhvFarCVH1iR8XTg5J+xe4sqyS\nvtCML7BZ90geoSG1zMD8Dz3BceJiga92FVfrG/zmUWfUXbGcbNz4YPFvzaHS\n6rV1qPNNhMMucby63N3Lg1ahiIvD0maTJSc/8Iiq/L/EF0YAG6NZX1BU2Le2\n0F8x\r\n=DvVA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH+iKQyfzRtvqtzmx/2ke5lgjh8V0XtWyCh+Yv4PhM+cAiBcWi3HIS/9sVi6FaBJjFqPB6l5Ppe/oZkrccTLF2IOMw=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.a04c0b82.0_1587170083187_0.9462557534966447"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.715decfe.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.715decfe.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.c4b4bba96.0","@material/menu-surface":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.715decfe.0","@material/mwc-list":"0.15.0-canary.715decfe.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ddba034f53f308afea3b1390f775b49e8a473e91","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.715decfe.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-hV2wicDLJbhethD9oVyNJsojwfkrh/6PVkLTP4sRbiYzAhWW50PnBqME/QzmKoGqxgaL5rKbd8KJsNhlrLp9Xg==","shasum":"4e6196a7d1d3c3a3bd49363576ea0dc9cc9f8bff","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.715decfe.0.tgz","fileCount":41,"unpackedSize":618971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeneuJCRA9TVsSAnZWagAAMuwQAIojb9hlVG2+Htp8rv1r\nqYaGmyohsgi9zBB+SMnMeMahuwqhHVtek6JqwNBjzn/san58h+vdSH+WbZ4s\n5tjWi1nuuuIzhh9R6BYr9QvblTLJOwmdewAfppbycwtrLFwdzEJB4AuymOtd\n6VMfCf05c8a6JxLFmw/8OhGP6TpLu+juEqtD3QVg9ob/5Zv7/oToE4tfiAwa\ncrTI+S+oqblhE0sA8IvvioztOR2vDleKYkaPZoHYEdUHUfOdQS/Lpj4X5mkb\nUvG0iw1M6HKO9q6kwuMocZ0lCFfDZFH7ORvoYXGovW53koiSM1bd85s4njLR\nD3dgrb9qqkMHjChMvtQPDFA7NZ1lQ4ciPitPy8oSvZ4847oUGGob15zTnjd9\nzBWJ+6fwuXV8mTV0u2zxm5gPUYu/vRHmkT4HG8o7K2K9kdWSpBg0brT/yyrt\njAPFRlua1cxSrFjgq33vs85uK0dpToJLFOXp3L7dYIikcxk1wDeLm1lzp90K\nzguMLgnb0yI+AzpZmbGV3ZJ61d1UyIcHVUssxpG8BUcGKenkz5ZKSmIIYfCl\nweljPQd5NNYAyW9lFGSgvfX8aUbMZBYRo8ttFmPKxo8pJRiWwrKdtR4XDXEj\n4uMlNqcpQxMQYvMp5BB8iP7zHAHfSIvcLcpccIvVsRtWRH11cgyWzVh7znal\nZDym\r\n=gyed\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCob9pDYK0GOQLWpNwhYfOoE0HzNhgCHVnBx0lTonsSYwIgErv6g1mvaCZeUeYEjqP6Zj3ZcNRHzB9VrQaVu8D3zM4="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.715decfe.0_1587407753067_0.16625503940909314"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c862cd04.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.c862cd04.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.c4b4bba96.0","@material/menu-surface":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.c862cd04.0","@material/mwc-list":"0.15.0-canary.c862cd04.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"59b73d92f5709c37a2da654102a61dfabe148db1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.c862cd04.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-0N1DusOyhbCMvk/X0DPOinBp/ntiV3jL0lfmCqpyxQN0d1HK3I8riOjqdHTMf4+qr56rADMZ6tpmXY+2M2Xxvg==","shasum":"d16231bd4bde22f292f4d436258fcf9f6487985b","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.c862cd04.0.tgz","fileCount":41,"unpackedSize":590515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenhVqCRA9TVsSAnZWagAAJo4P/RbRiY5nLu3XZ76f5AEb\nDHhXijWEftlutAniH8Z3n8aJ6FzakMbT69NWS9DYqeEYWp0mwD8MI6YQzQzn\naSn4AeiOwnNUVc0P1TwLanl1l4pb0e1O41RlhbASyH4GX0rFFpwRchPAi0zJ\n44qcflcVNqOPlrLG/XltyHWf2XD/+LBjAvH4wEf+5zqYFUUM3ynpQ0JOTH4c\n0MawJAeKFN/pOOGmIF00/3J0vOKcRo2IyTKfqVzRVv6W1K6lLh3seTHzOAA6\nRa+JlIpNOeynUFuKRwo7s//KVe9mfPcGNGRevQrlggTApDZhMmTcdcMf81ge\nh8QTaSk/sZI6KY710vSTJs76FcelheBPOFV0XoGQPJcOyWHRN4YMaSwXPLpm\n5OGnOGo6VozFSHRuSh40tg1sFIgb7birYFAtrVhaRoPDxc+hLpN4mA3wQcst\nwKKW8xVx6E0raP616AgmY0ISGJogW7+y2Dou9IHXL5OWq+hNg64GkuZGjMRM\npM9so6TKPbb7rjkcpmwEkoqCH2nruRCKEkrPmYpvs4STlbAwTTzmcvO0yb3q\nS/70/3XJ093P+o0IowyxfohJD9Wldjf9VAiHVrbUihvVb85cWPjOtoW0VS6g\n78xY1O72q6LLHXEUtl6IGN9rA/+UalmOybLVc3HcimTy3DIKglPZz1SevFFv\nGaM9\r\n=s/tS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3H0u2MGQppQHSHvpyIVerCg3NgaRTbBtXfrsi+5WOpwIgTK6qMkcDgWwX/AjdaBGT+app0EGthkIZCncYuotHrew="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.c862cd04.0_1587418474077_0.25559708680070714"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.e9b01b35.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.e9b01b35.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.c4b4bba96.0","@material/menu-surface":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.e9b01b35.0","@material/mwc-list":"0.15.0-canary.e9b01b35.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"873703765efd3bce3e325a39e56707cb2a7c47d8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.e9b01b35.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-FjB82eO6AB0spuxf7UM65YBhiiGGD6F2TGTHFNeu5JCN4ehOg9Q+JhTY6amdpwIoy6egaRVGCm0PnRxadsAqVw==","shasum":"59c0650a6d5a3a43607709b9c6f9909d557db5d4","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.e9b01b35.0.tgz","fileCount":41,"unpackedSize":590515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenjBvCRA9TVsSAnZWagAAfZIQAIQvXTy9l5pQFBtZzgsK\nsgN4PtsBFukz0r0rfi8MJf5aHNFeO6lW9lAD+nMaYh/4IPFqRMHbWtY3LS40\nYD1R3/O7x+ncANBkihoKuj+AsZkYz1hMf6uPczI6CSmPh6+01JHtsQDUQK6U\nyIw6mcY36JYlHl3WiNwLF2FcShpW/IUFb7BqjRVhpWF4O78xH6by8ase1Rmr\nvWK/8xNXX8BKwBARFER63U0XlaexjZYYG5K26vABzSHEO/d6/BLZQ03OMSei\nofMkbTVtWAeJwiSL9fuBMuW6NrjOMfE7yl26hHoozrCos9qHrHm7Zhwu9pJp\nrQwY50V5AfoysYxiICPVVFllty+JcpKHHTL0kV/ej0yvqXYAKxjEk5fRBrZS\nI85eIZ1anpyITPjFPYRL7aehmJvaFtfn5PiSOHEUUy82EBm2vKvFp/1cPlNK\nVVLQnuBDVDG55UVkwIm1Q4NL3NyYMRnzXf9ZU8+JM3BrytZ5rr3BuG/RRPEN\nwFDUtTKrKS9wJb1KTL7RwXL0HlMweO/EKDno2WlMRnpmchQ3y/5bCrd/Fcb4\nUDd8InSXFdidajfgt6i+d2uv0iEQcz7ElTZNzV820J150ig9eHHkz/kwN6/J\n8P8j9EvXy5s6BK77AdPC4DX+eudNV0kHUIu+zXeS4/FLYbKrfupLmgUBls0f\nf1TL\r\n=5r9D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH4irTDJAlLOKn9+KlGNaZDOtY+97VtliFi9Ey8PbrYqAiEAgd9LMuoXvbveIcYxRIg7U+0h1N25PY4Nz/FF7LlIJ5E="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.e9b01b35.0_1587425390775_0.16659983124806588"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.ee7e8989.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.ee7e8989.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.7b4482402.0","@material/menu-surface":"=6.0.0-canary.7b4482402.0","@material/mwc-base":"0.15.0-canary.ee7e8989.0","@material/mwc-list":"0.15.0-canary.ee7e8989.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3b58236c5ca9326b11d092c5b9977dbd601298a2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.ee7e8989.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-pKXL7bmFIjKAVnbpcT2l7ZfaVPdzP5ILfuv59Hs6DiNcqv3N6NVeAWlfzvnu1lHy3qsQSHsG+knCS+4IsFU9ig==","shasum":"1c7e24e7f82f73b43f3fe58de076e966963d0ccc","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.ee7e8989.0.tgz","fileCount":41,"unpackedSize":590515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenkOgCRA9TVsSAnZWagAA85kQAJCrHaOkH4hAirWNQ2NM\n4fnXS5XOvuhiDa2PuB34DWIvWkaqP2u9251Aih4M/WrL0YmmNIc3Azt7+sA1\n0I+bVsKnToUatUBUnfLifJMrATwN1NJqwWiSTke5waZ2YlgBVsBRl4lTJ1MJ\nzrn3HJofr1OZWG3WmLUYO3B3Ybl5ZgwT9Y+9YgtYLfVzsD1w82oJmDRLOoT8\nQ7rNXspWqZmB3xm7kh0KL2jrgXVbPJG6NyD8ZKm94rX5vBnLOwegwfcT+63U\nSbZkqS/EtMtx3YyUZTwXIzCRQLDM4NF/9gAEfabr6ffDZfpvEC998kzdzaFw\neUJOjSIyFQAnw+GczHEf5mRUPUfFY8E0ET9tOAJloyqhhv67J4h41fGaAZ5q\n1A4vfvVoyXLjMwZA+1+8rY0uOthv+H4esdJxy3wP0/2jNU16Xbkhz+9g0qFx\nOqe90RHpb3rDvreELE+W3EEqftOYeQsy5ayYqKK/raJjMBJZa7c1rgSZ4KTT\noL5bwyHLwfUidakrsih3ZtIF8jB2lQnmo5rJWb8rJ8+5/fuv/iVw95a/dWoj\niv4ID3FzJkiZcS3nBjWmq0TZzc8ql3npJIPKt0QghhM9yCkIk1je75trygw5\nZWBsILPj1oa3C3lZUkTMVA5kNYskgXP24m/QLHGJsiwyrk0nrYd/8/1WLYqK\nmzdH\r\n=xyb2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICGG3siN/MoweuTwVeE/arthuIRFZHYdR0gzxUN/ciisAiAEI2PfrTF0SYqvo2SJZlB6dJ2gurpdrG4y/is4WJQLFw=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.ee7e8989.0_1587430303664_0.29880293767393673"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9bf47ffa.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.9bf47ffa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.deda86d8c.0","@material/menu-surface":"=6.0.0-canary.deda86d8c.0","@material/mwc-base":"0.15.0-canary.9bf47ffa.0","@material/mwc-list":"0.15.0-canary.9bf47ffa.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"282e30290957ddb18c6119523574ba36c65d7abc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.9bf47ffa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-YqcmSV1ylTAXo0amPMMWHekMJm1j6dtqPZtlOgxH5ObLQenOo1GXthPJ2lvCSe0P57meA8wCk3+n6PijOsgm4Q==","shasum":"1fa0ba5f6fa080bc86c26e015e0fb83f7d97db30","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.9bf47ffa.0.tgz","fileCount":41,"unpackedSize":590515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenz22CRA9TVsSAnZWagAAp1gP/11navY+Zg7nSsnOS1Ve\nwUI/qSrtq9SFa2lKg8kR+1TnJiJJH7Q5CSO0aggzaFLBePojd1lrrHP+trH4\nXHiZKcqoyxH1B+FKD+Eq/C1hQRMb/T2ty/W4l6DhToRHWmajhvxJfSWG9Ko0\nMelu4TjWk0CuWS7TxtDfuG3guxxiO4fpqGMot1s6C4MPaaOTBfa3u/0xJMm5\ndoyAHYbaWGbJXihxKBJqUFnDByr+CKCirb21ISaNS+mn62XN9QNTV0JdoHcx\nAnuM4enGbGfaqjd79aBR/MBTIanpW0Q91TpUZlm85lXdg2ggnCo+S9dc0sIj\nnU6wgdWz8iteeSPkJKXHH39HUDMOH2ZPmd3X7RHiFkhBMDefMRIe0J/KAerv\nY6kVIaXfTkwe2masizPmumLYUrfyW4VDwltf5r7wWjNQzqbz6o27q9LW+sSt\n3ISIL7HGgs2KdC77GRBk42++YTiVif6J8qIk1XL/n48VU8ot9vsuVv4EAlxN\nlatDfzXZq0scYrJJcpdq3tpanXs6s4feSuoY+TZtegkAI4C4W2p48VjDdw+M\nKhR/9m5rpUK/SJ4tFCNCxIpd6K5hcV3q0rMDOLl/xhxr10jM2rH8f4zYOOCd\n6Hv45ld26/JjYg3S/0tGI1MEw53olROpmdDAP/BfgCH65LlTTAYyflnZLxJt\nfsu3\r\n=uKk5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH0/EroQtpw61wAwBu/e4N0ad4iVDuz5ShAuykuYexHvAiEAphapwfB4+Ckjffm/vu5FcsRKyKUzkgpermIwQc9bHNI="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.9bf47ffa.0_1587494326474_0.040029419202518124"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.078dbd98.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.078dbd98.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.c141801d5.0","@material/menu-surface":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.078dbd98.0","@material/mwc-list":"0.15.0-canary.078dbd98.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a45b9b95a7710162ffb06fe74053ff1d108d5684","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.078dbd98.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-eULy+h10jz/fv7rROTvMrhUcWOrVVRQOc+pHZKy/emce7UlWG6iEVZ8vkUcWys/FltZEU2K24qmEC0wFgBr95w==","shasum":"8bcef5025b7d3e54e5849904037c1774f0b6dbcd","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.078dbd98.0.tgz","fileCount":41,"unpackedSize":590515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2HOCRA9TVsSAnZWagAAyKQP/jI9KpUCUeh3gKawau31\nJBwxH2QNLHtVFQg4ekbU737h73Txme3naC9c9B1UgURijnfr1av8tCswx5eH\n6T2ci8HvET3ppSD2yA1GMv18UKfhLl1Bl0AH1DV9A1waAXLwYXJvAxw6htKp\nilEdGH2ubuow9OvyjC51cLA0zP+OA5VBPYti/Qm+fziGf5n+3T+oyOiBZPDA\nTAJBBXcrRtzUwlNP28frDWr4YGakkHiNO+S28adSdyIszwqj5ez2YYbkJ75b\naGLZCZQpFPdu+HnGswhKrM9O/W0C9P3jKld1P7aGRIu/jAy39CX+XSkLr7ei\nx/VJnt/JJ/u/iCELPcPQhK0W6xqlF2IDlzL3D8XEtHGvNP4Y3E8bu0BJzE48\nzB8OrECTyldELUTqYy4ka7h38ZHrYOEjPBm6d6dK9GiGfT2jTK1+6oXFSwH9\nmjgjT+qSuyn2qfQczIx8Sp9D4c9JFxtA7Si2S5z57z/LIBZa6wEpQbmvoXkE\nvcfP7c9xbGCUXHFemGV+hUqPEVU/xRGBKKC5R4XAiMexSvoreg7WOLqFXvCx\nLJ4eOHFnO5nlovt2jqd+u0EzqlfTYqa5zCMV8BmktGrgnNmr71lyX6vkS9NW\n10YavPg9NYXYBL8VeimIsvLT5ZRQ32YlnDsJGXVF+UcXlFUNCGOX4dgyJpRK\nGevb\r\n=2T8D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJX3b3dx/o9powT5nWxSsErfFVOpp8lL63/ZhvAaWDMAIgUWRCTkbFuffB/IuglGuuuHUUT3/PzqKujKhIUS8deJw="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.078dbd98.0_1587503566344_0.7473667170057594"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.953015d6.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.953015d6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.c141801d5.0","@material/menu-surface":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.953015d6.0","@material/mwc-list":"0.15.0-canary.953015d6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d875e6d658b1a3287b35d2c77aa8274d9828fb46","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.953015d6.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-qyprHCRQvPecXXjcGpZVZ5iP7fvpybea2al2siPAqye5kFgEknLxqvNu/U3yknR9dRYIAzDPYZxdZ+NbOpKP1A==","shasum":"a35dafa646fd7ed2a0c5e1b6f7c00962024b3c9b","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.953015d6.0.tgz","fileCount":41,"unpackedSize":590515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2dJCRA9TVsSAnZWagAALh0P/AwQO22nAL0a9fcTjSL1\nPGDkrU3gvbfh7oKq2aGltj5qyTp9WFZMNjZKBFxaLAlZsL0v0Wjx5sd6KNIO\nU13rEznUqH840Od0CRhv06pTFWjyXeEm9VBrtw406iXoe7Kdqu7y3fjZzHP2\nOwSExdCFMUnMboJq28vpMCeLapXGFIqDlhNpCrw+Y+GktmieJJto4mf1KKvS\n6uHMf0R+LscMiOYsRSUS60P+chcPup3VxEB+oD3pIYS7FbDh7amIr7B5lUpA\nmpj4RVtRz90Ogd41mdGUJm/qgmYjIXHvyC/CzAG+K7jyvlPAqQSc3RCJ5cD8\nmnat8vq9g9t9cs/KBdVvVtixiuwAd6esSh/xuRlfLIbp2ncaBosVaPRz7Jw9\nP6Yx2P1VTVAVTQ3RDvkABub6CkuobXlOmXJuSQM2UvFzPdKGtSoPW4k8+kTp\nGrnDFQiPfmPKbXcggnfGRwZM21H7eIUgVO6gfoLD2Udlv6fQFas0qZRnHFnC\nB38HlJat6KFlK1kLRNE6YjRKmQJj/0ObxpzV2dd349owZ/blRvmAYcCRBXH1\n7wwp8hCpchSiLGKTWhnkUtGMHccvblMB+D8Xh+KsTe74DwOlf0wBiNblzqZU\nD1Sr3qhBiiG1RmVuH3sS1xlgNMzXbPL3GsMsQ2F31+upfQyo9iWmvAu49EOO\nIXUg\r\n=Q7gF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID0lFfWqCA6mnXFLY2fbjq2XaE3tbAsIhHJBBs5HhbNmAiA7TeFZDx2fRy2HW6tZSTDnwxyMA1KkE5qRlMz2Fs3xsw=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.953015d6.0_1587504968871_0.11125628374180474"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c360ec63.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.c360ec63.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.c141801d5.0","@material/menu-surface":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.c360ec63.0","@material/mwc-list":"0.15.0-canary.c360ec63.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5147ccee26bbbacc14a1d7d86adb845ed406bbac","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.c360ec63.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-BWBt9Hni0Fr58+QRk3iy/mvDZ8slE328gC/8yrsldBNgRjboR+ukdH9UHJmomrHpnrE+B4090CpENabMy66ScA==","shasum":"89b8e2858e1c830878c8579d388ac3bca09e5297","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.c360ec63.0.tgz","fileCount":41,"unpackedSize":590515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2y9CRA9TVsSAnZWagAAeBMP/j22frwtuAYsTk2ESxMs\nQqmxX9hapYolHYmC5BzelytlIoZ/sn8Ym0JAIkb0jMGHBpsDfUycUl5SKYb6\nopAT+L4dvHbesHLFAVlPCpV6yvd6thLvpYHarMVnAEzc8lDkfaXvtmPSgyHB\nmDv8gHpDMYtf2P+RMBR4up2WPYGVMhfDeka6+68glZjbsIZ59Lh73E6CYOZX\nf9qpzdML6wNp7Ap9fG6c6iTdKmkezKPS2SXsZw4+nC9Dg+qqFDv5/P9xeVGv\n4h81xVaqEESh7d0YedG/8YED8cLcOkGk2SyWlYuF4R84h23hZUZ6YUfnJcTz\nSw0Z0KgBu/81WS9cuLKx8D6vkRggOdBuV3Q8kDCp7+s39zjcs2tRbBQmAZro\nQweMuu2M+yoHgJ4TOd3k4ODls1vbzdYJ1vIC81CtXfK/nLswkZtaz/UxksMI\nLSEj5QejnVtM/Knitg3mO7wxBrXGgJH/csPW4oesxy8j3cKwyh6IC0NOzm0y\n1w+q56zsx4J1nh+LXNr6SuzN4wyvr0F6KzAPXA16z/ejFlkNX3DQohA0e6oY\nxWnVfhn5XFkhMoIsWgrAICJTcUOI+6x+xX91qQAV77nK/f3FaSQEDGR6/BIN\n2GMvPAGzRiUj4m1py6Y1lCQPlTu3osufK9DYr7+7z+Bxx6WtZvKcC8/Tkora\nBNgP\r\n=5Pkk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHSS0IB8m8t+9KCC13A6wrcTT+6BollPcPyJ4Gp84PZwIhAOQvPrARrfae34lFZUE0OvUnWwy3NAIPH+HJx8xbDRGa"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.c360ec63.0_1587506364636_0.10685928274059209"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d71b65aa.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.d71b65aa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.c141801d5.0","@material/menu-surface":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.d71b65aa.0","@material/mwc-list":"0.15.0-canary.d71b65aa.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5f57992160b26bdf181837dfc0b0ccac0425b3a2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.d71b65aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-0z2EKOewh40pfAYMWgZfgCNjge0a2aT5DTWpACHCLgnygclRWyoBoK1x9fhRCPXUug2X6RQveHlXJkB/qsqg9w==","shasum":"a9d3510e535430f298cf836451e3304f793effb9","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.d71b65aa.0.tgz","fileCount":41,"unpackedSize":590515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen3XQCRA9TVsSAnZWagAAWggP+wbwhnVVPHDsOkg2H/dJ\ngZhxsv4C3/L8xuuYP8j1FvV/4sIeKEyf+f75Ll3g1rOibkhxRpqI9yRlmXDx\nxtrke/+aMFhYXMU/VZlo/mGiuUbozJbJdofKbaMryJOyjF34BmWJETOoD+Mb\nPC5QOewO6J9JAE9uu4uDs81au66OligLDFxOhEKR1GvbPMwtOZl+jrKd1FsE\ndDieyE6i5lhxorUAzURBbt8zXV8AX8FQ7cKRZvfK/Ff6+etmLrNnCV5jQuvE\n6nLyereUCTctSkIgoMldoZKNnFmEzd1+y15BG3GG2UOKdvkejFFKCpHzYntt\nUs62sAHysocFsYBQtbtwy2cKV9tAfN/7oo7J17VKDxXZ5gnkouWLwo18T9YX\n/GMOddJoltXGJITGpZwtDC2hKe7d5t9VF1A6AfA641zeZ68eUA+LUi6Z5Byn\n7Gf3O7R54QsVOMWu114P0nVsb8hR4XJgyMtRLHo2MnjY0OG3rQEwVDpUExra\ncN+nQId2StDUc/usrRLoq+QDHMpRtgmUsb7yP9gj6k5wjbWXrW0x74/CNjya\nP3mNbxKQMV9QpEg70GXtwTuwAn2KQV7pTOcLCG87oLI9corQqht9gom4aVA9\nvhUBpez5kbuOuA8eG37ORsqpkhRtbZlIe5MQ72PiNZOguEEBko3k6FnWjKXy\nZlHv\r\n=Ctyn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA3Jf8jytxRHgfws0HnLQZaCUXRsv6FISLytbGk4Qj5pAiEAgBhlgIj9r7NG04ZSCkRT4ie+ZyVd65CbRoWb81nLHKQ="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.d71b65aa.0_1587508688054_0.3996035898716621"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.58d51135.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.58d51135.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.28d10a96e.0","@material/menu-surface":"=6.0.0-canary.28d10a96e.0","@material/mwc-base":"0.15.0-canary.58d51135.0","@material/mwc-list":"0.15.0-canary.58d51135.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.58d51135.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-OZ2hKBuH3fFBfyjd/4xlH8YaPHt9/cjlLQVb6SFYqJV68bqtw5lne7H4kQDvdVrRDZb1rHJYySH0f7SvNLvCGQ==","shasum":"359b3e3f497f7155532e48937a241d05a41e3c99","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.58d51135.0.tgz","fileCount":41,"unpackedSize":590515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoOUeCRA9TVsSAnZWagAA7LUQAKEUSq5dp9yiV3/8voj/\ntlzyN6KVsW14w4Zyu+zvm39CRANisWbSwVNjhmNRRmV+QfL1VfwZvRrc7eN9\nd/7l16IW/WQl3bWgVvEd/H/+xefsXU3GFTZYQQzB38jpWQZPP+JIs/A/Dsee\nd6haCJntBUbIGb8Qkaw3xq4rTr1rBY5+nDqDoKEgGvMEwCjR8YjQuUMZD0iw\nbtKDmpmGqQgk+cmh4Ax6Vd7k9T93d5K2lXiFpz1gJwtwz1hGT0LcIWogUZ43\nVaxyRxLf63rf9Dwz5/TsmBMIbFi79hzRLzp3z3y4tp/ij292jenKm5mDt8Nw\n0i1d3RyLZ1U8hSd+AbzOn5eNdGWJyNkN99CxfTMgZ/QV0PQ36HyIchyNgWhB\nh7byJ2rlTjJK73TLstVwTvgeXwy1Nf8FbihL0EayL53PGxejLcqwzx+wbFiv\nYOUTlYnuw1Knz9vsEqrCphmG9Nt/I/kP2Mkz9wthjB0m6vUpHdeH5Ua8KBfu\n5ErxfgZU55aCrUpDVt+SG3qmSOEyZPgLwzwZSB4bg9xPrt8FVGQgMy7otBtb\n7S1oDpfdioqHlJ15ENzF/5jafNiAn6ItWYT89RuU3V33Golg7vLL6KOAtLgH\nH2I/ZiTueBJlrtQxqBUWbJk6oxQqjZa1mzje8ff07AflrFICnR8FHe+z9r1w\nT7X0\r\n=x3B/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCXC5Aic05UO1BbO10kNn2CmmhnU7J8DSBdk/DzyHa4WwIgaqoNscWsCw0SCkmu+qAb1pEDv5NcXrgKzAWK7vuhdRs="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.58d51135.0_1587602717797_0.0031932407009389596"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d0af8ba3.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.d0af8ba3.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=6.0.0-canary.28d10a96e.0","@material/menu-surface":"=6.0.0-canary.28d10a96e.0","@material/mwc-base":"0.15.0-canary.d0af8ba3.0","@material/mwc-list":"0.15.0-canary.d0af8ba3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"86c71b26d7f2ffcaefe79c4882ac9867bef12b0e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.d0af8ba3.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-U8LfID2DcKitLRO5u1G/zCKfGk3vlaR3i3Z6DtKU7U9Xd8IndNQsjLsFOeEE2qrpNKA2lyDF2DQDjgBfdBShFQ==","shasum":"74b1314b74a9259cd20d34aca341141d6a8dd888","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.d0af8ba3.0.tgz","fileCount":41,"unpackedSize":590515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeodoRCRA9TVsSAnZWagAAg5kP/Rqk/krEWX+pV2jSS8h9\n1kBh8z859d7a1SbjTIGM6WSW51KszyfIvXsYXQrdvJRcF//dpw4D92x6UF2C\nu6ld7rwur7K3fQUjw+tR6ED5wNljhVFVL1xCVaICc8A7lL4ZXmdk5sG5hjCq\nDDOeodmNWxNu+3hRYxnCG98zVfImaqKZ5p+9S8R3GBzPqrGKVOA6oFZimFPV\n2+V5feMjoQ9NbTg8iIx1lsPRAeFdxn7bVDa826MxFDNshTRLNeV3jIH1Oy7m\nHYKBCn0TTEUefH7jdeowjKHof7flVj87JUlUzpnfXee/cT+agKoOzmDJf7y5\nNiEJisJmzcUIWMUBDwKBKxCAAUvVy/4Y44z+isYNl1kBhZMkmGGNhkkwCwPT\nJDH2wfjFkNrXLhfZl9nFZoOdmPGanKdSXQYkWo/ug0TvAQn52f2EJpj1T2AU\netCDTuZQw4AiVYvSsIkM3PEsrWjjE/7bfQscw740Xdyjs9vYDWkorhtwMShd\nM54EURHRRwxP5wY7NkBErh7eecxBFznMjrexjP+oX9xjHzZt4jz/lzMhBuky\n/HVEYdOU7xTjnInLxfiAzZPMVrzPbuR1P1zPvV8anypZGOh92fInr6F52kSr\nZG6mw0qGeBI7JxQVDO/L0AXRpMW/W14p2ZQPT+WPO/sFoT9cU4Nk7He6ZQzh\n1HQF\r\n=k5/i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHJNncJOhcOAmv2mhDs5eU3rwW0yGDTKLjM1frKEQu0BAiEAz9arwnX5fd0RSWiujHAV5d+uxNDexO4UJ2/Khsfi3Os="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.d0af8ba3.0_1587665424903_0.2910235736007083"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.8872b17b.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.8872b17b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.8540808be.0","@material/menu-surface":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.8872b17b.0","@material/mwc-list":"0.15.0-canary.8872b17b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d1f49732d08170a0330f9fb28f2b2ca978daf858","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.8872b17b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-cQFPWAhbOrIaOIvF8Vgy6Kr0gj6VXUrnBuZckX4o4NgkPKvg7/NQf6jYxPUB/3CtXvXYC5wO/sP+Yom6qGnZjg==","shasum":"558fed1232f7bb47a21ca19b91cbda5a02610c28","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.8872b17b.0.tgz","fileCount":41,"unpackedSize":590515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeof15CRA9TVsSAnZWagAAERsP/AxWonwWjP5LE0s+sJda\n3eItd4ee5t7jxUKWWNZntyrmUUJP9V9d3cJiLbLyL/JESxIHcbxV3JuQL9Py\nQjl48duKq93Ra/ND2/OgY5MCeZvODABO+c9aEvfSbqQdyvCMOjsawcojZ8Tw\nQbaOitrHwzYUSET0u6dVKqAXfXJ/mz7HnHEeOAzuZ4r0KflZ1hDi/5tzkWmx\nXuyrDC0/NTCsGt9pkMcH3zD/WxfhULNz36SWIjmL2XIrKd+Xs0aMINPJYjb+\n7YdYYuqp+jrnXcn0sQVEv4icvlnIhNmEjeMUsNAGdxfDIorKQD5Jg/CmMcmP\nyVvORJrf4XldZdvBVdcMBSxqJ9OmO0HUuP+x/P+MTpg8o6kw1BgveXFzf/st\nfJ/WUAzllsjLB5xJ/KnW4yaTEYWaQWBBGJDPZk1JTBGsO9O45LgMVCKtCm2n\nH7IyRSTg5MlA0Id7hIeQE2iR7IiHC2YJVSUdgkEa1x/zMLQJikecxgznOWdF\n1zEstvV/EyC/ly3vuMwpxO8V62qH36E1buf8nT/SQZJmGlnltEvhsZCzzMnl\nfjSYNEZGGt5TrUO2qjlgN4J7qSkiQpPb6QrX/na/PCfpexL2/VpKlDFBGMkn\nlMLCgqSQgg7LDhK/f6RynXTUPQlhIzqesPUW0jkuy2i1Safdvo5yMKNLARoR\nwvNV\r\n=xtmY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyqi1mpqhvzxjsAZiLujfqec+ohWng1PBEAb+rcTmqigIhAMsH1JRZAxYQaxgfNGQ4j1fq5dtJPVbsU0Bb820Guuyb"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.8872b17b.0_1587674488503_0.7301737263568995"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.eca1a610.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.eca1a610.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.8540808be.0","@material/menu-surface":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.eca1a610.0","@material/mwc-list":"0.15.0-canary.eca1a610.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.eca1a610.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-cmUPkPcPjI1yQieoCwkaSKM78A0G209FAJBDkLFlJJouMKrP6CDCk6BrfqTaULHHleWihzxbtED79O9hxChbcw==","shasum":"9649002b719bd068d44338e18e85e319477253b3","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.eca1a610.0.tgz","fileCount":41,"unpackedSize":590515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeogwBCRA9TVsSAnZWagAAoc8P/3feDFawD1fZL9B1YB2j\nc/Cl/I8NyDIJwKFNfL1ZdeR9HibUxlj14YBBYi6xfn1WfHb0Fuob2uv7Avj8\nLF0P4XlfS8soPztMeSl5Fk5kf2K9lXddzWhxF2Dct9L1CSIC8DUjoEbYJ17/\nqmg46kKb+F3NQ29m6JTCPCwSHZkudNYexj0ErFOHe2Yli8h8nzCKNnTTKuZf\nwXrSFb4GerwJqxneAQjc9TA0hC9ipgtRknqk6BXx7BK3gpxHOL8WOSekU+7a\nxw1EZ+94QCogHHSTOeT6jeszBr3UaeMZfkV1eaGbg3I8FzDNL23fhmuTYkFW\nlCH1l0+i2YQ9wGgZH+XSk/WonrjZd89O+xoRtJMqli8egpWzfjl5+n5b5yFX\nS9y5wpTB35qcdnRNEwofcViAK+IZHnssbmgrQEipA+JVWEZFNCvqlz0ECQdf\nRIGAYA+vrIUuJUg5iKq9glWa54zoMriSsVWgUj5leCMCfJfbcOpUBqDiuDEX\njYabwzbd9/z+NPJZsRbqU7blGzVRLZmtMfd/Eh0svzImrm85HpICSmyVj/Te\nbv/25mt8FNQBuhnzJCOvF+OwKZlhZ3QbZY3BfIWeeD66GjyH1Rv408htxgSX\nBk3tv+dmLelQdLndAnTpDBVn+MoChewUFtaeKBY+BE+v+6FK4BvI2SYUM7ze\nNaAz\r\n=x3bl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGMbYNlzUGNqVKLARsQ0tpDUjGI6ioUAxenI4LrNWBW3AiEAycHygoVvOSi0p9rstBmdvdHVXIODFbmPeSCN+MCHtGQ="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.eca1a610.0_1587678209199_0.31917677190910654"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.baaf529e.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.baaf529e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.8540808be.0","@material/menu-surface":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.baaf529e.0","@material/mwc-list":"0.15.0-canary.baaf529e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.baaf529e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-CYwEhL0lDD42DjWv1kmshvbWJbDCwYC/+v5EWg+HjJDBLG4kE3VluG7Acrz6/rQneoM+l4/qnkHTiVFGS1hMnw==","shasum":"0883edaa78f4f158745759b800899d06410be370","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.baaf529e.0.tgz","fileCount":41,"unpackedSize":590515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohpgCRA9TVsSAnZWagAAWq4P/0fAEgtsBqMOI33c0ai+\nVTkkoSIjnTuV3Tqba1wqrl/jTmL5kEb8FpApwIc5dXCfxvhBhnRBjOrE8spz\nmfpdR6I2irMpBIlvuc6kZ0uL8ks+FaiDyw6GZHsHMHEMBaCA3gK3ocLP9ON/\n5B3X7WGioNRHRrGcKs1nf0CYBnEll0/WI8VDQQGnne+3i4dMKBTtC6ih2uG3\n3zRpcjIHb3edSap63+xm/6FUnR+q+bvdTIj8fHaLq0rk+nZ1zl+89XImNNKo\nAQ4aaUb8EWPfIj7jMW/1kF8ToZMBpsPOuA/CIb74wgHBI/QMrK9h/JYIx5xS\nNZYjrckt2FY3iuKT/LHRJ9lfHhUYhD8Hu+yI6l0schcEDoTG6488hyezEtVl\nguJqKd+fFzSnzHXwdrVQsPod3nNGfJRzc5CCfQdfJEpEvYbrJgIgvn6h8smE\noHHLUeTGf8Vch4wKs4GF0/CMr72yHu/6ogQS6/hqYzwQUtdgwj+9B4cGwgOd\nt3RppQyv7pZs90O7XsVqXLXgL4wliZQIb5v8DbQSbGOCwsByubkBASaDGCZQ\nKcZ3EsE0s/GtfTPxSH602qnsibGrko/TvhZak/fHz4nD5JWP/Dyk8meN1Ujt\nVZKpy7113JFM0bdBNzSA8iHPBL4BjW3O2sSKlhIZZAG1kYAR8ZTDbho7BH6i\nB+GO\r\n=wZLc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBa+2jktJislRNN86M3j/g88LpBWbQpQtoVJp2cikk8qAiAVD+ep3GiXcpiDP3qHJYPNRtAEaNCRZS2cxwWaOhGJwQ=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.baaf529e.0_1587681888335_0.6186375642840938"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.7a7992a8.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.7a7992a8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.8540808be.0","@material/menu-surface":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.7a7992a8.0","@material/mwc-list":"0.15.0-canary.7a7992a8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b9b74b473b6026badaf980339f4451efd1a9e8b7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.7a7992a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-fBNGhbVNNinTnFPoOgoPk99wZ+ANaJ7EdKQ/LnDbSdjJHxsIjaK1t1Nqf/QIwDLRBrit8Mn5e6XVgChoDgQDNw==","shasum":"8bfe5eb65a29d74aa45397cf7c2f0292d07f6b94","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.7a7992a8.0.tgz","fileCount":41,"unpackedSize":590515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoiFpCRA9TVsSAnZWagAAAWwP/RLq0Pbls7WTJJ19nPDJ\n0KKq0WgdOeA6eAmuYtMs0ozWPaq86lYc0leKbdMK7BMZFsDX5SUb7yQHmwI9\nGHHIwj2Igv75Ts/TEop0ImYUBlL5QZtTP3dkOcEP4fPMeT76vtjN/xnBCXO2\nZ8iF8SPjgdP1jO5nU5Q3Mzj65S2j8otiKq/+yzR9XSnRAvTU6qEmtwArb3aj\njitNW4nzfchiBQp8QVWRiFuiw0xlQ6cSCesA2tIIxntP28cD7Pbb/nsDbLl+\nUrQtaAz/fAbB8Unlnsoi+lzJ/jCI47YfQP0UXlKalyFSUyYRP//2pn4OVve8\npKNrdMMMEIhF6pF/fooewHlL732HF/jzzTNhpVo3i/E0//01KvCnrabWAlM1\n7Th5HYu0VrCsdejEmtr+lyfqqJcM7rCAawS1qGryD9p3zjdZX7gPIIQ7GCSx\nBXQScpicFGeBFHm2tvAsx49eWIKtWmOMzCZ3lE2LnpV1UClWmXmUprwO+q/M\nbmB/Z6efxmdZ1X7juIn/pmj5VqecZs30ReOcPZTimt1X6iC1duEw9OXEKmPn\ng9iw/X1HoI5aW196ZBrEDG2/H4Ptedvl2/GI+DhJDU6+9K3UbYMsliWvUo1I\nipK2tern2iwsdDTtu+S0wxcUt0jpH+DJkYMu8Rs/eosMX/lpz5MsXhvpVG0f\n/dH+\r\n=UzN2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIQCYPv3wLpO/8YLAB/yUzN/klilBXzfVnZlP49L6OxXQ3QIfV+98MhxGGW/hoAvYQADCYOmbhcQSecdDTuomvVCASg=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.7a7992a8.0_1587683688735_0.4307531476086326"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1150d64d.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.1150d64d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.8540808be.0","@material/menu-surface":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.1150d64d.0","@material/mwc-list":"0.15.0-canary.1150d64d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0b7cb5830938900ecd0b5201ad88746d308b91e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.1150d64d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-4M3OVkaehiG42reqAbGTR8+diVb4QDqp7SzSSpB8eMmu8u4vXEuN0F9szJEYOfTUyKnvj1tgaczsN4ZmUm1uUw==","shasum":"eb0984c6f41263b5c99b7714711bc65a5fbf3a90","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.1150d64d.0.tgz","fileCount":41,"unpackedSize":590515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojB3CRA9TVsSAnZWagAAVYQP/im6t9Z/cl5PkRLMXWAw\nZyfwX28b1R7NF/UwzfrWFFp24c/31LvTnwqv5AhrUQtHxJzs4+2LLjf+sJDY\nRWkQeC6FUh9pZDd5G77ZTnwrFovDDDVgo06RjCYhy/PmmAPTCL+HzCL1sm3e\naV3hTCBCLrghkMR1owiOKPWK9zN16Sps5849+iA/Jf+ClvxDjpUgGCW33XCJ\nHsmJFENtaHHGpL7dPp7VI3oGg/LXScUuYofq7/SjSjjOs9ss2z17FJBvHmrB\nO4Q+lCHRDBxnpFx1y1/vt6z/EQ5grtKCwdtno+Z7m9Gzty7VNJmtG9AW4mHy\n7XJikr5OUvStu9EWr2seqzVQLc25s3FBVNgWj0R7ZvpEs+f915gj92+6YL8f\nzuzT+scit0kVNT9y0ZfRI/9eL6kVU4Y1KW62QCokotq/82zQ6VqM23qBubpb\n19icAEkngrYMnUvshsgQwj0K4/OrCu2mLudQxQ6ied2edWxth2qZbKwlIpJj\noykLg/vjLYHtcecZSu5v5Nfi5U2uyOiAP4xDHYrzyzel54YXz7Uo52+R3gF5\n0yRJOqsRsno0YDa26WgYpVaFQL2co9H7KcCu9ucoY4x426g6d7jO5WnrgueN\ngM2nLjGjC7wcm4GS1ryFWXngxjwpMo6nOiRfzzcXcFrdoudsH4EhFJ5UnAuH\nU8bV\r\n=refd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsyaLgQ+aD7Kcu8PCuJWWHqBeSWbjHfW2x9F900XRo/AIhAMbuAmam+Y27L2BZtU1GaJ7ZYrv+aur799Y8HTofyOKv"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.1150d64d.0_1587687542962_0.2357732463625546"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.dad3f828.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.dad3f828.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.8540808be.0","@material/menu-surface":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.dad3f828.0","@material/mwc-list":"0.15.0-canary.dad3f828.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ba9b04a7b15588d7423d100bbf29fa317a1947ff","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.dad3f828.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-5Z7H3ZPyPQs1ks81Q/S0OWa7V2dkaaVOJxiN79zeU7OO4uQxxHc8Et6aWFu6Sc8llmvSUwNCSpVSYiAX79CmRQ==","shasum":"315923ffd8c8debe1428209b5b96279c1ab8761b","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.dad3f828.0.tgz","fileCount":41,"unpackedSize":590492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4eeCRA9TVsSAnZWagAACyMP/3W0uJOBKEL4wMUj2XhD\nzkA21EiwHhIxT9vya+dOgTGgsmje/CmUqDEwHjV5lTNMOvjtbiI7nQdAnQoN\n7FcI7Rc6CTc/GIz+uC9mul99suDs3hwUFUcO99iIbruHFAMJSpCCOUxi2QsU\nVDHe80AFIse/jhb0Py3GoQHA+s83owsuyo+HtF2RtobUINmaIphPZIKz1j8V\nKDeoO2WVjIzeQeN5F2QYA41UsjFf3Rf8V5cA8BICI+C1VbaWlPxU11w/yqn/\nXYWhDkgQzMfwe9FpFLpL8dJil/457GAq7tQQSBFQw4iFUVst8ZfDFZ7Oj4Dl\nSMA8q9hyF0crh8klUBJqfbrNZrIcIl0Lgbp8jS+1qfhCztFkAp6z6VMCXvqU\n9bVaUtUehrVkVLjPGrzYIXtsOJMtaELzUlBtNhIoV4YP8sX5L1MNZGGhB4uD\nk1cgzFGAXyZaVjMsaMuJSDqOkKvS11h4w3mgW8FI4zmUjdS4U4hjDETQ9ael\nqr5kMAt/ddU9kO38aYBpT7IhqxaWqu+jVe0WEIkzD3EkZOEDbXsFicedwsL1\nPGUiVNnY1UO6p3ZEBvuHLYeR/OvIzO1/ERmvjeNTz7Zqiae24VFTXmZADop9\nuYs40AbQPrjelPaQRJEj5WNtNpU86UzFYxBLL2u7Rw/2z4IwMYzmnqhYxSMG\nTeaN\r\n=mgeZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGQfqV2OH4IN3bTBukY7t+7ZTRQxQzEqukMOwLHGJcYAAiAV/4Myl7Qr120q+a/Sv667SOdql/8GeG8rsIXmtTAjng=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.dad3f828.0_1587775389774_0.6275405891382699"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1bcdb47e.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.1bcdb47e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.8540808be.0","@material/menu-surface":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.1bcdb47e.0","@material/mwc-list":"0.15.0-canary.1bcdb47e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ed51e46ae11b69727c91d55f440b68af397ac10a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.1bcdb47e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-4sDIrJ9jAEpLafkW9FNq14mlgqXXqjKgwixGQj0a3/69d47bSsRtYuOuqSjAO0NzllMJv8r+tQ8Rx4FVSuMUfw==","shasum":"2dad40a136be494ac1b419f9b50bc42ca33f8781","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.1bcdb47e.0.tgz","fileCount":41,"unpackedSize":590492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep4MkCRA9TVsSAnZWagAAAEsQAI6kWR9nzBiMRyLxUVJ+\n+B2LOz3w+PD0YUnTlNdm6afdRfFds8uUL9PInUkIXc+tavVwk9nza6sjqX5S\nqY9ug5iOZOrzY/aBEF+8fJ60/UXmT/F80vExWsOmzdWQfSHga4btXfVVEb24\nOgHz9C0r9fY2pvD/a/bU6IfiyX4ZvymRr5iZ/IZIM4Jv7S+Jji/S39QILouN\nktt6kQB3rnbIfbNqSIHLOcGLXlogzQwYus+EeoDt0l9JthBkTRqRQjQbVvPe\noKqTbyox1ROfeFXvrmq3mv1mUdciyUAMewriAlfUT4KgN3DfSCVWp61yDT19\n30QjmFAXZPb4HGd8a0LuZnxbwMR0Fs6AqGaLzR4Ixp0u/i5Icyb4LEIFm4Jy\nbTk5vpfJ8x/sKnmGnBGbbN/2jYIQzR/IPXFwcG17E1FkbKdXyVMiL/n2Ze9g\nWrz8Hkfe6IZHkJiigzoYS8sN0QUi7jdEuLCTJgogbWjk5buJhn6vRv/YL9kR\nt+yCsO455TjJo+DJt8Z4e10n0mxH09V0+rgRMKmmjA+a3zAtk0mBw6xlhXi9\naRV4joGPhI9RPRlUxTRReQUlT0H5gLVhIjmXLe3JpCkvOFOlaU4/uVH8uj+E\nCRSbl15ygDppAY7938XMxKBKSBY7Uhu5Fcnqw4rPTxXLYnvKfntPriAKvao/\nFv6O\r\n=ZDpL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfojU6SjfbG/uVhfkjpuFABtxJV71ytP9YsZNMztJSCgIgFHzXR68++Vhy/UupdItgrOyms/kQNafUQ0smFLEp7zU="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.1bcdb47e.0_1588036388339_0.3133511153598745"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.86ff1b9f.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.86ff1b9f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.8540808be.0","@material/menu-surface":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.86ff1b9f.0","@material/mwc-list":"0.15.0-canary.86ff1b9f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"61a98a59545d9e0b0fd96c928737677f2b981fb8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.86ff1b9f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ykcRLs3MJ+poXKALC6/57kwU3iPAzUeL7xR4cjy7qt/VqRq7d40ErltSn9P99ia247ELQlCws1M3zTKsh32Uog==","shasum":"90a506931c794cda25e0f4523fc98fd625f5d71a","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.86ff1b9f.0.tgz","fileCount":41,"unpackedSize":590492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep5tJCRA9TVsSAnZWagAATbsP/14wo41CVNaiqt7MlvA2\n+OZsoR3S8tSGRwl0K1oWCqXlOF0NrHqmL7wXjSCLi/poKtdalPozlnyE/wok\nsJZkxVZ3Vb8J+MXuuM6tWUbJqf5ZG0HYUljs66ZiBNX1JytTKf2tAVZFhSov\nqfNewM1BzonL1/+R6ljqSYWrcEAm1XkkNbbzoS+eUGCOjnkR5Rx005bTwto5\n7XJTEy7tRQnSDrmd9tfmZ8IaRLzWfg6t5CVSo+2Zbk7rJ7OkoMi6Nbv12084\nYzxK1izlsEwyEu7apmmse04PDBwcSmQaVRDEEpR1COuo+6LW/hviQkknaupP\n1cqu8wQq7UuTw3RJMVZmpMtCMbjpXdBEzCych6FPkFSYa6yFbzQwZFWlUxFQ\ncxXJoq+jgAHsoYcPMtPzpEYVBzAgpa6p0EmIzSly6UFupdZPGEMrFdtDy2k7\nK/kpsAmHzY2dP1TZVP5BpgmQHiqAxj2CvBa2wMcLHaSaLMHNLabS8XmxXs3v\nh5gevUPfbqyNp634uYOXkIumUnoUYwls4JSXt2LwdIdFyY9+LhO8OSDAZkFj\nrmpNLtiskve6wCPNSW54YHf2VQ/2hVRnESNSXKmOBDDbuE6YLshY5//w0sqg\nUbK/piUjAzWlP69MxJq+FaJXEgPDmFwuhq5n2QJyNHSGFMOOM56w+yWkrBET\nareD\r\n=nZ1Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC67e6sgm3vQNdObse7CV1iRZS/rsefdtwQllqfyg4UfAiAroPiV994rlKpLhSnYI8rDrJzQ/cw39ASt0AfAkQWDbA=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.86ff1b9f.0_1588042569233_0.7890979608330932"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.54a86b20.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.54a86b20.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.28d32f8e0.0","@material/menu-surface":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.54a86b20.0","@material/mwc-list":"0.15.0-canary.54a86b20.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8cfd732e72200c6982fa6d6fbdd6cb5496660a6d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.54a86b20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-NGcuFdmlQbfsAP5BrU3OrQgzZEcpIhjUx5x2DVhkWuQqMEMe870jiTACh/KF/QcPcSp3fUI76Veb6NyKTauTZw==","shasum":"94afeb2c1f74688c997d02034f712563c2b84395","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.54a86b20.0.tgz","fileCount":41,"unpackedSize":590612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep6CHCRA9TVsSAnZWagAAiuIP+QFApVh/EDZoig8EyXke\n1XlzMpvYFjt8sIACoIQBkvTv2gmwFdmQWmqHwEk7jE7EBh0Llo5GIf5NZI23\nL9PpJUpuyeSDREi1PEkYGmjD51w7ejWJz5YyrZr/FY0rioF/NJzLEQSyZ3/R\n2/auFqhzrPyvVbxFrD/QozFQw9jkAXGnjNWUU12CelX3omUOLrn6M8nKKdhP\nh7AplnDollcdxggg4gaJ1kYjgZtsw0JPGuRJTHol6ejfpk/VuAp+Vss+2PmP\nvnEciMJ+J+9sAN3/UMGayprHYe/UFbIKZLf38MUgDuGsLp/ThroGtOV/uSq7\nZu8oLAF63A8rDlyz6SCbg/8IZ1QeS9VTlNN3HgQcaZDgihfIZ3WA/4BtFAFt\nWHjCBq4u0V5S726F6Jjgyjpj547lm83S2j1uXaqgHW6WLH64KcBafucX41ij\nYaaln+lXYRt9K+QDAZG3I6cBU2PH8YSLmUXdbrbwm3oPHy/vvPXaGIkhYLKH\n7ArM6i/CvMNryr0oGGLnc4zQajK7CwqZjeCAMfKLY/tFZj+b51Ug0SundGIK\n/0cBZ+6LhTppAPTgiQ0EPAC8p6YCc9TcAtiZlBr6kK+x5LUP9D0cqUgosfOg\n0Fc7eHRJ9qMdUNtPMriexHu0JbS8RV2MUuTcp/dhnpGjvYd9coOCW6QDwCdq\nDH7s\r\n=FS0K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFjhg/TxqwHwUy/lARm0bYo0X7mbteGqB5Xc063TiolqAiBQDAM8ULeb7kakBmUXz1F35clZcVrxeS5iOwkhFAnsvQ=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.54a86b20.0_1588043910881_0.6286511140134499"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.938fd24b.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.938fd24b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.28d32f8e0.0","@material/menu-surface":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.938fd24b.0","@material/mwc-list":"0.15.0-canary.938fd24b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.938fd24b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-eoKcjY05dCS0khohBAgaXvxZP+OmEW4U3p2Dkib2AEYJ7GL4fos/p3Wf7C8NDr+L/BuHCHOv/MZn7EmVwbRNHA==","shasum":"4daeabc6bf2bd9f77f5d8d0e205800cfa43212fe","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.938fd24b.0.tgz","fileCount":41,"unpackedSize":590612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqimLCRA9TVsSAnZWagAA+BIP/14pqN19yxbcvIKcwRnp\n+vAfEP87I4isX1r5oGjozu0mHhvJ6l9V1XYZsL8AkdA5lzUW0is4ONaHjF9S\nEjthoQ6xPfaYzoV88lz8jobLt1zQJHxB4tHCm7u3lv8zRFv+eCNZhnaoYWVM\npiqNGDqiP40lAsv0HY8k4al7dT5xaHY8YhlBuqTvq3r3qlPelvo1tOw9p4dd\nofYImcNVZHwUD9YzIHV14a7foMcETQDlffMqViZgdmNP/P3GbCnB72Hem3em\nIDV+H//kyDBxTBIp8FEMvlr+5HIG3x3t8nJiXRA3FgyZaM4chVw3u2qO3IJK\nNgufGV4rz4SlPcKb5vQQDk7fE2jdlegXpPoCCvu3r0IcvaC20xQDA/uMer4y\nunNAO8xf5qqzfwc+Wao6WHqiyHFUeWvk8qlrSr00/FQ9MJurhnRpyLgh9TlA\n7FnWhnGK2F6/bTNeL9j2P2FcvkZFtWtcLZRU3hSK2cybjxGIRNDEvCMYrKg9\nuvogLu+4/4BuwxHXaY/0wRjWJjKxJALRRxWb2Yh9kn7hSXVAqfoBmJRB/v/c\n5eNjFzIhDau0V2NZ+UynH+30rYZfACsl44/mWM5m/vxL0Pdfxm5CF7v9urQp\nXQKu8rWkS2/OmrSqL3tx+axITRG1uFaP65ZwminQbySAXu3PN0JXFlKkwcx+\n0THy\r\n=RfxH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+E6u2YCus3e+sx6fdil1Ejfl8Tk/uw6u8jDWbYVuXYwIgC3Y2yjP2zLrW+tR3DKYjuNnCf4UsgPk8EGCIZWc1UTI="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.938fd24b.0_1588210059162_0.16564394187420373"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.39e9a008.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.39e9a008.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.28d32f8e0.0","@material/menu-surface":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.39e9a008.0","@material/mwc-list":"0.15.0-canary.39e9a008.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2777862aa4cbec00918605f0726651658a2c66a8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.39e9a008.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-4oERgb0dSKBFHmIdRAc/G32B6EsQWvWZ9La0U7QrHDrIOV41PjVlnW003PobLDq3snxLT5cWzQfYU9Q+8oyQwQ==","shasum":"14f705cee6d3d3908621d91bf5cfe96923fe89f3","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.39e9a008.0.tgz","fileCount":41,"unpackedSize":590612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqjRkCRA9TVsSAnZWagAAoNkP/2weTNG9NMtmh5jyLYlD\nu836ikaDNuOPlV0CC/jj9cBubLYMGb384OE5KhYnmt3PVSfCbiZmOP+u2Enn\nFWP6bOwMAjMalx05AT0TxcH+x0NjCf37HJXoApDrDfc8QS5BfJdtzqyIEqz1\n2K8ZYrGSKLOcKOB1muFkWBf1NJc4WRK5kP//Y3Z+fJMQtrp1zDviNejfNjn0\nW5wslI6SVys6BcEC+r0mZH0Wqw6UktyJh1PF2BeNjArQ38xB6duaHofSioSL\nbGEhTb3HieKn5UOvp70B53BvF9HQIlH7xCy44xyRj1fjrCPx8Mk6/xvGXSLe\n1wM201CqNs5XIvvODiCl8rzv1OpC1IlBtVltJ6w3+J6F4R8eShwarzur+6fG\nYb2koPRBDpLpR5bUP25XhLrkfNGQ3hKEQzxHMosc4wvPJ79FaA0JfpoSkhrv\nwwdbw05TPKP+jX0ieHKPlPc71AinGgkvg+Cse3shuFYGAdz1xGUbnu2ABzL3\nRknll8eI1dWeex8KHnyOyPR3Qk6rrUkRtebwdNFZ53V29vIAmeuOj8yDrt8y\nLdMzXdtKv6qDoaBsDE0Be+n8ZFMIcwKq76ZRJKnCz2dxbJLIv3O1thQU8mJu\nDqiSe9Kg68p9g57CA9yU7O/87wvoyR+iU9WjAwXO7d13dGnL7uyEu3kI8V1C\nH+SO\r\n=G193\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGHCX72UW/qFdkDiv148eOdiMwK/2IGqoTdDodsxq876AiBJvbl9hA9ops5ZWnB+Ifm2YAMXxOuFmQYDeZm1qGodQQ=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.39e9a008.0_1588212835904_0.08671351376284453"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.f3b365de.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.f3b365de.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.28d32f8e0.0","@material/menu-surface":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.f3b365de.0","@material/mwc-list":"0.15.0-canary.f3b365de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b6d6f6d4a289f46197727279f5e776b79264ae07","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.f3b365de.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-hgqFyneu26GS4ETrN6VldCLKYh+01fWSl7mKbIKJzgUXpp0A9/3TR8ZYI3J4OA2fT9lWj160PXUXQzCf3OITtg==","shasum":"70dcb338964cd3a3b19afa30e09d66f6b9e8c680","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.f3b365de.0.tgz","fileCount":41,"unpackedSize":590612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqowDCRA9TVsSAnZWagAA2VMP/111vgGKjxCE01DPlSkE\nV+uZ/n0j0zRasikgSszkoypMn7S54hw6prVVonwuVlb6tg1+6ZP33OVGeyxt\nXwjwEU1KwwnFd0YhvuEv2YZNIHzDRGLPhafmn3T4QgMtFsYaiXH31YkvK1lF\nzUJccMJL9reWULZPhmMK5/w3u4T4iKT4lPjvLPnHg5ykKcpbk3MjL00V0X33\nytnb4GIo7MuPrn8Sf0cyUr96HXpb54jgjs5lVz2sn2n23dFVpPXuBr1ovA7u\n/42ISpEQmOnab1xYLNiRnSHOxse8FVtVkm/lL9LZk5ZjdW4J2VlVnKVQPtvU\nzTrJ2igpHc0fCKI8cLJhtgy1sxz1GMLhJ4kjHA/nrVhil6qdKrmAhRGTKgsY\n8uZEMHVHgPjeVWhLyzfyzyE94EiRZY8FNp156HtC0MMokCc3Q9dgO98tSQ2+\nXj/KznEGEotGMWFp4BFYaIAW84IpEYdGB+5xNHZcz3WAFl+zoRp5dQ/e3t4F\nBmELN7NVCRcQcE58KTN2vofh5PIkSme3apVvwe4vN+n01FGNZTWSejJbEq6C\nckRpMQEGyJl9sGkAO1TxXkDvPZf+UtBZZTpp81AdEg8b1vyc36HxLuWKrKCQ\nJa5pIboWuOqKWGdzMpCDoeQse2XQmu2czRjCL+p8yiWSHPqxCNvhUrVy0/C5\nyDTX\r\n=Duu1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFKG9+KLjYTzSDFMlyfC5GMtvlCClrWrzZjXXbmt7ExHAiBmaCdcg/8T+uhYc+w0l3LHbh1xcev5mwgrwIysEVebTA=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.f3b365de.0_1588235267362_0.3522684994896248"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.cdbdf807.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.cdbdf807.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.b0f83d2fd.0","@material/menu-surface":"=7.0.0-canary.b0f83d2fd.0","@material/mwc-base":"0.15.0-canary.cdbdf807.0","@material/mwc-list":"0.15.0-canary.cdbdf807.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c46702178e5c5a1096937d4bd70ad6f4ac4d1dab","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.cdbdf807.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-bKUs65e9VBXoTiJ1auzJstm3fNzc0RYaII/mcdo0ielrXjQShTYZfVSd7dYLZykleuT4y1GwtNu7TgUCYX3BAg==","shasum":"09402db7c9bc588786f4743992089ef2deade224","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.cdbdf807.0.tgz","fileCount":41,"unpackedSize":590612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeq2oUCRA9TVsSAnZWagAAYDMP/AwM8ySqA2Cj6nxOeoSo\noxX5woyFo+U6i04iAP5fRXonwt2CXg+KjYeKqymY9SSw2rdU8Zz+YfdQgR6i\nVnaNGepW2JNa/n4CsBagrwzGlBm/NvO+YoANG0J1DWCncUt75uIVm25ZoxeB\nGiHbOzNGTV9kpqrwFC2DP7EGg6h9CR4z6mXQi6gmuaNY9yRWWAf/6F4amLHu\nphkvRrS74p7QIi/mDqYSCIguVnUz7BDkCdWiuVPKRdyR2qZD0bE0H+UoBKsL\njd6YP3Ux2sZygQ7lFfiZxxWMHEqMOPpX0wu3rvWbrtaJHFbvw15501jVX4o4\nnhFgVMNY42FnndJkJq2LHZLJFDSOWtfvyDiDt80bqEQOW94d1iV0XWSHUZBQ\nCFRKT1zB8OSUkpm/wUpvQYbK9F2xSH8pPcW5mDCwdqBPr/iwDJYjAzoeptVi\nf0POAKmYaS8S26ry1JvtYQPMrsud5KRvNswFAZVI9WFWFGoUy855P/0BneX/\nD15ie5kmMs5/KYkmIGFWXE5z++Yhzblm+f6X3WJLvtKijura8ZCxwT4lzFE+\nbjT3lKwxnhVLXM0ACDVYDA/yRM7G+uKOTHBtPeY2eLfScgjhK5tbU5QZPn9E\nX2JLzT6tvR4UpnMA+3Y3kkkUmaVRwVqPR3ys3PQ6s80W5nk/cxgZ6nYyR/zA\n4oWi\r\n=iy5e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBDK1NOkijZX89EzWliuCCbpZEo+qp383pnIA0/O+M/3AiEAxLshV/q+6/0iV1erfJnEckFQzWUS2xMiAh9YM2q9WzQ="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.cdbdf807.0_1588292115617_0.01052451559693357"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9995ae17.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.9995ae17.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.e59906a57.0","@material/menu-surface":"=7.0.0-canary.e59906a57.0","@material/mwc-base":"0.15.0-canary.9995ae17.0","@material/mwc-list":"0.15.0-canary.9995ae17.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4d5bd8b757cc94e00dda1cdb19761b283a15eeea","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.9995ae17.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-8d8HJPGup/xoTwjZ0zSUOPVPJEwDzRkmRxov6WMYau1yZ4IwNrzYQ1TBIFEXj4PyOSqo0ybym7kqG9FR3ZE8ag==","shasum":"a090776ab43fa8a3b3fe789250d13a7133e80fc3","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.9995ae17.0.tgz","fileCount":41,"unpackedSize":590612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerG5OCRA9TVsSAnZWagAAExwP/1lmpuZAOyWhxw2OCJ9Y\nS9fJt0PbIyR4kFiMvLfRR76jwIMAcrLuON+r0VaHrddp4Y19+bACF/MuvNBZ\ncufyBxSP9YrEJuI3XlJrf7MSScwhKUBqsVA0Iosi24/dVmxgKXUVN175tvrW\n47lv3ZuXsK0qq4/5MxvwkOmE+Wjo3TbGcTIhMi+k7eKF1LdWpAQ0uASLS2sI\nTeUdyCZdiS476BPCVvhyhaL1fXRZHmV+yZR6GRBkONx3ihlnCHjiRch/3XzV\nBDacMqJnFIEtCBNExGBYKf/0lgBVkwoKzp5DWD5LxZQupbYETWF4PTYMiBoA\n28OZOxWEbdF13y0HbTMBa6LVXs+3YPRSAHzOm14LfWLYRHZj7uy14FafDl7J\n5FVweuoKEFfNZMvtaDvsikE44S9rKzlgQuyB8lR0D9/gz/a/mA3if8y9svUg\nYNi+tu+FFgH8joyQyu/4oi5xqX3kGa6/TndwppGPcVgsuWloKB1aCA8HdDke\nbFnxDT3l9cebqQ+ChCqI32bhkX0YcYHIlF8NE3SWAQa8tZz3lp6pHbZ75zY2\nxB5hzUGl29emA6tT0tf6wgk7uM2y0hBVIk71uNdqaUQW2uMCkoMATo3vDwSE\ni9Zo/IRC7PLaq6b6BBYN91Occ9XCodBErd4A9zSWkyth0qPnJ3cJ5F0WthKo\nDkpr\r\n=E8E0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHSt6XKkzZ5vgDbc3DBHzvRC3h5Wsm2ARIYkRfgZq59bAiAit4KFZ3B0EReF+zJqAcBHMqOtPM0Z/MgqN0r8iCINpA=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.9995ae17.0_1588358734384_0.8384045431671066"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.457bf035.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.457bf035.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.15d65448e.0","@material/menu-surface":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.457bf035.0","@material/mwc-list":"0.15.0-canary.457bf035.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4174fcf7d0ec013419d2f97c6a615216cacd4687","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.457bf035.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-JkiTCUa5Idxqn4Pu59sTPn3LKxL2Dkbt3RvSrwY+A3vEBYogHAv6EithTr6Ygf0QptG8GgPA9wSw8l4ARgHpcQ==","shasum":"132f84250335822d30440bae8d4a863f523940dc","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.457bf035.0.tgz","fileCount":41,"unpackedSize":590612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerIvFCRA9TVsSAnZWagAAtHEP/i7fIh++9MH+hgnO975d\ndGe5NWNttwQdV8yxJ0xy9PIQVU5cOxbiZKoQWbHX3TewJLRM/7pNyxwhXFSz\nthYaM+pEul0HExbyZGWTNWwIOMDUcS2IPdsusbyXdzSTKgLWX++jWb2fNljF\nbhASfig1dJorwkohgI+N/FrDxBT0zh5OHuCP9TzEENazkaINuX0E5yOfw9TX\n4kHFybCxvI1CI9jPAUDOiTeG4wFNXtxeSoNsNTlVAwCjaAncuIYf2n+zxfIu\nC3XQ2cOumVCJzBmdb5kx45jd6wiOdHdHS1iaxY30pkPJSP3i8F8VmAS3mngb\nG4mEbQa+bDGADInXuijM/zSClhrqPjT+QMIogAR6nNwoQUaCVubRJ9w8mCuM\nHLJapkI7hDBahzImGDU5/hIHnVfVaUV9Is6jmhiZh4AlGr0cSXLIRQwN1LNO\n4JdMuWVV18mYEa2IXIWwFpXY5ymJ4coKH8m+hDCd0BAcPWj6ySpa2/Zdabaq\naUXY3M/DqBv5s+4Til/g/khcbAcaORdSTGvbmEyvEI03An7WSlUB7WDAcHlH\nlViG3HSg8Iy1arCc/B6/xfvPaJCpYNjumhIGBeWM3ecDB4hzC+50nWsAZDLl\nY8ED6yL8v+KLGGl1R6jvkuzH2GCsVyX0ef8QIL/qOyFPPt1Sg74vma/Fc3Vx\nsLvK\r\n=1x2N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrizfNPbweTD/uNLPLXGqmPc6NFD5ZN8sd5hCcij0sJQIgFoTgCqgjNW0rob4vpqg9w7P6XNPbcdt36LMMG/T6OjE="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.457bf035.0_1588366277135_0.22265303927096625"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.2381fd02.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.2381fd02.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.15d65448e.0","@material/menu-surface":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.2381fd02.0","@material/mwc-list":"0.15.0-canary.2381fd02.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4e8207837776c4f108fb86133541c49689664446","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.2381fd02.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-YRFKoH6bVW8vC4uKv/zOInE/Kvo0rge85yOwLEeIawZxs5r8f8Uc/c+Q/+U7z710dXb/1XSg1xqH/S1Y+OIoHA==","shasum":"f25346fcebcb7d68abab62b17aaac067e66f9978","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.2381fd02.0.tgz","fileCount":41,"unpackedSize":590612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJPuCRA9TVsSAnZWagAAdpQQAJ/Me7DmT8G1/a1puyH0\n7WUAsjuBVg2e0Ls1m7AItDn5QHSP16K45gTvjY5IbEW12WM9bFSX+YzUT3bB\n77gsClVHgvj7iIdsiLMoHHTmFRmuXN973wHuly5PjjeD/D2Eg4foLj/5pnVu\n6ANRCPUSPU/h7BNIVu5AvLeUuj4ffJjd/QHrc5gS01cMRf0jIQ2sXZuiILqx\nnTzQfLXTsUuO3iJw5R7y2HgVW0ZIF8MfH/JKDlMr6MAZFRtJG1+D+DnKofmh\nS2DWs+dXHFgvPg4cHSxyQ/zU/wraSoKorZd7kwqgfat3gVr0lc1VkgOd224E\nEA0MbdJHqhbQ5al9+o7leYvvpADD33wtAH5zyZVKU+rCbGTaCm0lrWTEGDvJ\n0IXgE5iCk7hOfu6X0l3dzPuLHXapA9i6+oAhDKBrF9qyYrcYf8Y5dyFciAnP\nUCc01Xg5bj4Dc5uWlDnyf732hpt9dTTcfQs5fOJ6w2YkVlRlFrf74oDPXN93\ns24HtSjUig2vDO5KXl3us4VXxOBpnnwWA7Ntq3dnjl4LTGUqIL28/xZ9jS6V\nGYjQh3rqu9n7JPlhQILOYJfSOXn5hjBWnwaZa6QNNV+uMZZ9ndSR6gcQgfPB\ntQoh25fF5VQ9qGTO4f8BTaCMo7xcbQ6EL89VtwsD4dxd7gb/q0G3twU0zN0d\nVHVa\r\n=GftJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrnPs2d3aSrQPaIjssqoD+tw1XbaVNWiOVC5o1nZwvaQIgVnRNLy9aI7PQNedwF8lO/Fk3cDp8T+mRAmxG3+NnRnQ="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.2381fd02.0_1588368366160_0.521317608821303"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b2ca9b57.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.b2ca9b57.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.15d65448e.0","@material/menu-surface":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.b2ca9b57.0","@material/mwc-list":"0.15.0-canary.b2ca9b57.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"98f8c3a13f6577a5e1ccca480ffe483c91183a7c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.b2ca9b57.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ZjD46ckkdR6Ig6D+nyAv7ciLMi6opWFWESsHguj0y/pir9DhD53uX8UW6r57tKVvF+CgUG7iWRROLNo6AA8myQ==","shasum":"c514d10191eb6ee95f1a18903410244bc94391bf","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.b2ca9b57.0.tgz","fileCount":41,"unpackedSize":590612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJZrCRA9TVsSAnZWagAASpcP/0zxYndpKy2RJfWPCz87\npjRfXAiHt5qH7g1L1u1TEtEJWnt86NaLstg1mFVAzQoHQdUA19TxVoVk2v6J\ncHh0yNv1kxZm1Mt8DX7bx4fF9TptLTI2cX4vSI7eKc1tiQCnaTiHn8l7O7nm\n3AtPaRlJtNzVtoryCYGk8TAEE5W6Ej7BjMMeN3toCqYv8pe4FniTytn8oZVJ\n0lnWrG7YbVkOVlFw0/3s/+OSJAWSG/HcufQi2mwJPUN9ekYt9aT8qv2+YiDA\nf95/56LNDTMYbH8kQBxeSy0FJF3uex3K9vm6MyO38YdR8YqkNWYd91YXzeH0\njUQleQJcS65CSHiR6n/+6aVT6f497vUvSJou5sKfyVrFT/F9BdBqicqP7Tt7\nugsK2LFNEBhq0nsk9j6A9+6lR8FlLjXSSOYPyGXf5MugWNeGPuNxwJz7qEUK\nx4V72M7wnw6AiAAU/9B+yifnn0N1B+AoYlE9T00wtPyagsG9A1AzrfGBnCqF\n8nWPc1kp7sp+qseARlM/EULwUax1eNoYP6QOQTp6K/1azkeiLclW7d5rYc3p\npXjmSCkHQHmaTVHA6n5n5TU2Nax20LRHOOehdStKKg+8BIWVS5a6GedltIJZ\nzvrq9A6i1oUSG2I6hAUPjsOSod5XBp3aH7snpRS/ljMNFPfypyczyfSJnzZx\nKoD7\r\n=txSP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDaTSt5a1bd5Ljj6e/Bsktgy5wn5+939btf8GWJdJt4owIgdDbAgo7zdyQlskc1QkthJzO7o0qh8wZD/j+vUYe22fU="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.b2ca9b57.0_1588369002875_0.0650782179154259"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b2b088e7.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.b2b088e7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.15d65448e.0","@material/menu-surface":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.b2b088e7.0","@material/mwc-list":"0.15.0-canary.b2b088e7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c524f04088895074106127ef3584a2aeac09b189","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.b2b088e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-dMXwXcfSge+utaWJPYMD+3ElK91/9aeMlqJjbpWGcWDc5OB1W81Fi3SrAXxtsZhCYIwlZbiFtcY6pr4bAQJ/bA==","shasum":"ed0b3467907ecdf33937e716f81be7110963d30e","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.b2b088e7.0.tgz","fileCount":41,"unpackedSize":590612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKPeCRA9TVsSAnZWagAAZhAP/2g0Psp9YKlbTHOeFnuH\nrcXcOkqIfaySh71CWY6FfypInhSpQoQAlb/39AngYumuz57iBAsBsbgWrlio\nKmnlWUFUjSwTRLne0qAVw3KjRbIEtZvlNXjWxTdOjovixtO8sF8oApvVC3xJ\njd+mm9K7qQvEFhNKgCQah5G0sIJ3Nsx3/AE0E8GkQCg41cfcJsBX1vGMYpLb\nQaUC60t7mOfhdsGWD7rIZpS2kWIoJtjn7BIAl2S8Cx0KMMf+iE0UKyn/Bhpm\nIyfoWY03GDk4AkZSkNUCvy4LCSyIfwQPGxzCrqRv2yXwDJiewIcXLqpYOpXW\nwDbZtoFVyaYMplPqRPKrdZB3C9sTdsq+y70oFXPKR0Y+IFzrzO0tatUwAEn5\nVMLUzNsRdVSAdqFeDneFAADscSMHof7iL7LBB00Ribtd4Q8+B1P/BpinTAML\nLqGrAOWLQXNspS4rL4kExo8/8utXLy+raynYE2N/ynDjuETiSf73JtyPiOaa\nSgw9eB+Cs5ih7K1oWfyX01Fb5pDUwreWtltNFUA9mGbJQRjYfPyEosl9D3bU\nr/unhbMXB65rScXAdVWtTB/+KRWeqBvPHnWousvcuEPoL+C8jMaHQ1GkAXoF\nKrSVyM4qIDigL7+V7zjffEaTipiMvjZR6U4FeUlvKXFkLCXq0oMPzhJ/6inO\nhWrs\r\n=OP62\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCcWGjoPno63vNF2kfK62W3Z5l7nt1OPmayn2Nxgs3umAIgZYQNJMCPoPQzN365+EqjPoJ33rJ0f5QAlROp3A2k2To="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.b2b088e7.0_1588372446063_0.8353809149080991"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.fdd8f69e.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.fdd8f69e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.142b1549e.0","@material/menu-surface":"=7.0.0-canary.142b1549e.0","@material/mwc-base":"0.15.0-canary.fdd8f69e.0","@material/mwc-list":"0.15.0-canary.fdd8f69e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3888dcd836699affb59b98e4306c2ac03971ac4c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.fdd8f69e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-yFe5p9Qck2b+PO1y97zTWa+z9eG/I3h+ihjkcat3A9fy7QcLX8arTKqN9h28flVa1yYvcrPcIa7rXftip4y4RQ==","shasum":"dbfce69293fea3a7badfdb8880f2097196f33886","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.fdd8f69e.0.tgz","fileCount":41,"unpackedSize":590612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerLv5CRA9TVsSAnZWagAACR0P/1oZ0nNb32ZnaQSly8A9\nd7kOuaXMibQwQ2NyLcvjzwbajELSk1wuKhqU2rvk8gSQrE1X6Ru1sKM+TUvS\nFeg/o1dfpx2zbElG4YZyovHkyaTmUTg2bkJIIG3s0/8/GGOMhuLP4cbm1sTy\nwi2Dr40qpUk3SF3gq+7SiSQd0bJjqOcxfBGY7G/U3VejpuX+p6IC05+nTo+c\nJb2VBHQxS94iQbk/Tl9c2tvUdGmF2UJ6kqBzVmYySS8Z72izGqO5b2O2eZdf\nw3hLNws5mLDoLIZ+pjUNKCFQg33H5MCMBq4squy2yUaBAzQ4WTU9rLK7pwzQ\nENPKcYyCeNn8+e/4WDjLiY5IvNpRVQYdzNOEVvjYWCf1YtK4g5TIYbhAMwgn\nCJQpODAKDJAj4bTuhTFIXC+J6y5dB7xWBMguomaUgGK81POnUQuJ3e4oBoTa\n8ur9yrW8oAGP+RZRxbjY42G6xy9Lsd3sY/qb6FXt7ko6kLNQvltXVsvN48lb\n+QCnwk2GlG7fVjqUSoDK77aAFpfILMxdOOdknCh4izuQmc8kzmIetkv454hb\nKQN1WJJ/2697P9dBFRbRNlBmaGHYydXN6R5oDauva3bVWVZX4oMssbceRCLg\nMJ1y+Ti3ZCmHGemJfdNlIC5opYGd/DdG5MmynS7pjvCEUSQhqOBGL+3w7jF9\nwyy8\r\n=FztP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBc5Gx7MHJ9Cj5q5Rk9OxFnS9Eb9YpVmWzjX1sLl2jsAIgWphPcq3jCDb+Cz7lE8MBPF7bXWtUh+BMvb5CM/MG6SQ="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.fdd8f69e.0_1588378617107_0.6490401148839202"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.730f45a8.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.730f45a8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.142b1549e.0","@material/menu-surface":"=7.0.0-canary.142b1549e.0","@material/mwc-base":"0.15.0-canary.730f45a8.0","@material/mwc-list":"0.15.0-canary.730f45a8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e4604a16ebeca9fd76a4f742d3f936e83aaad680","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.730f45a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-MeKojGxV5O0JAWxqzm22xGuvjHpSAzyES2lm2daT9Ab8/Xf4A9X8mVAwO23ShrABFukmix3quNbmeDwXL5FVDA==","shasum":"ac4ac528fc7cb55a064bb2c5053fde48da52e1c6","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.730f45a8.0.tgz","fileCount":41,"unpackedSize":590612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery1hCRA9TVsSAnZWagAAdFIP/Rv5qQoV/d/7SeR7cdS5\nwT49IOd2O78sJwIlOB+Q8BMgFwOsdP4rPeW0FxINdyVRsUJ0HouuKMog5/r9\numZJG7dCUkOPjN43/1BvTnuTdyk3dPgZwMWD3gy7ZRfkK36Q6Fa7Kb4HWQst\neXQaRsn7KwhVqS4gtg1y35usdDqfQf49BpTQvnsjwKJ1R+DJflV5EXx3WT8F\nKDVkMrbw/x4Lz1oIVRp6Q9DJJhBTN5kUqcowZd95xTwb3uIfAfpmAaM7vyer\njR+yd2HhoePoa8/UiSIKnCFog+6mjE9MRSUWyZWeSoNYCs2HE8MVdCqhQfWU\nXuI+vyO1+6+X5dSq+5jWuPaZtpRRLBFxiWw3Pny+E6wvXTVJvdR/MIUN6V8l\nlHsZ1kbPFzDtMl3VC06FwjL7Rh4NfchSFiVKVtmwcL5sjYx3+GwVQ5/kDxBV\nJwjJ6YCvvV6gsRZivmwsWMWVmlTHlZ9gosAXS5O1FqMhaeNyQqolVnyZLDbO\nNry3IgSu6PFesme2BrFSireDK26L5QFNFp4hKMgmO+hjBI557dXcctKQVXQf\n5h446Gb72ZxWNWIHWABN/Xk6HirPPnlzP56nZ+LB1a+kdamXGENhwzAH2y1k\nkH+19VLB3PTRC422hDUYYNEbtRKJTO/zJSVj9gZ68231JAmivVt/zcaOzbmK\nmD5M\r\n=NB9N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyqIYMjy5CqpPv+1uYNENLP+Ea7axgAJVGNrlHp2GtmQIhAPCaa6aDH10PYz7a7i8IorLpl3AwfkeP+IO6XuyEEOpv"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.730f45a8.0_1588538721346_0.2331112125082615"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4219bd20.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.4219bd20.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.142b1549e.0","@material/menu-surface":"=7.0.0-canary.142b1549e.0","@material/mwc-base":"0.15.0-canary.4219bd20.0","@material/mwc-list":"0.15.0-canary.4219bd20.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.4219bd20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-UmYUNwoqvtYedmmZoj69vrGcvc9XCyH8dnTqIZyQmAXITrXBs+MRill9jGlFLQ3GTqdPAn161o2eWoweW089Pg==","shasum":"ba15fad9e9412a446cee9a0105688ed73b6d5866","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.4219bd20.0.tgz","fileCount":41,"unpackedSize":590612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKYgCRA9TVsSAnZWagAAXnEP/i049vPVMSGAvb6pi19I\nQd3k3qLioXW45phRTfEm3Q5p8qStH3Y9VWqh6PiQhd3ktGImWGmuKyd/oFwE\nkf8aeyQB87MbwoZJrVv6cUWszHfY/U9Ds3exAH1WHwYosU2CN++a51cnHYMa\nJY3aqZ4PNZb53rYviCDeWC6+iIO2IiMuVrwG2hFZaXyN+MLTQtd+wsju+CFF\nBUp9g6wZLsWIsWh4cjwPv7y9onCoaSVbxjkE0dNdIGKdbC1rtz7DXgy1zHK7\nr5WWwSVQtuC+n5nf4zwQ4fRmf4lynqOrR0Y0lrLrQ1A5EgR8UO4sQE+7Xky2\nlnla9hB6KVwczUE5PYSqhFU94nGR+9CaNYF4odze9R8cc2EDNO9jwyAOhPdX\ntbsyqEyUslefCmLvAWKXbpx8cjKkDhDuLGqiV8wUv3S0iXpG1gR7TMwyu3Uy\nwxLWV+RQj0xxi63VrkVZI0OMbf8BkYDXqHJZrh3SDUZSOdMiepwrkjXymFnq\ninXdseiylJXBv/sXif+1Os2kx/eL4aJQfQV9dSKuP1miH+xrmR5wz9KtD2Fa\nd9EiJa9z/vVOITl27UmCIJDkIQjGTslZ0lB9wNXZglAdC6T5K8TXA6KDJjDW\nciFABcsAureqpPSXUETDe0YxRFxRwWM5xa/jxAuzhiiMBSAUkJ2z4rZDml4B\nnJ63\r\n=9zyL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBwMoSpLcruQk8segaCPaWQ3xS4412DCBRgey3EcSc47AiEAx3oOplsV4UlsK79OCrOF2telqOtkBcd3DafBucc58VM="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.4219bd20.0_1588635168379_0.8018587698743285"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1d83cf6d.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.1d83cf6d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.03dec929e.0","@material/menu-surface":"=7.0.0-canary.03dec929e.0","@material/mwc-base":"0.15.0-canary.1d83cf6d.0","@material/mwc-list":"0.15.0-canary.1d83cf6d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"72586b3b03638e183dfd5440f006b405468a37d1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.1d83cf6d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-UNmVDi9J/+5347ZNAOYRLdtMRYboxzZWaZCW8VzCXs24y7OAjDwhYQmSXdT7BDe8NY5b2y0o9YC6F2FDhKMdrw==","shasum":"958d40dc2999046e9fb0ac52dba0813ad5f77679","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.1d83cf6d.0.tgz","fileCount":41,"unpackedSize":590612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZ6CCRA9TVsSAnZWagAAkdwQAJz6q1zVRKdVnV/0xIRP\nKak9BM2dTwXA+fOaRKV8MzDt0y8RwWWJqxHT9QBLz1MycDqLrgyUVeZc7wdc\nSnF14MtjXHkPMFdJsoIpMwfM5NudwGMr4gHeqxYr/SwbuouAIh10NBN0njL3\nAGY0p494CYYpALuV63uq87jV4bHw6uBbk4+duLmG0H83iL9SI2m/0ZOgcYJS\nFwL0ig6SPmCl6LE0AZzWv0UwAzmEdjYNLWpQYU3TJwOCjcsC9FF0TUK8GEsw\nXJDcf33TGK/a1QA7+nx8QOvP044QvnXEeqXP8jF0v37KIqkbMVpvxUXOYkY3\n0Ktya+9+xx1Elkp02bCYZ5+S83YW093pS2DkkJgakbIkRDSs9bT/+P75pZY5\nfFyhtX9yxzl4WVQrZntrSOF9ed4VaBQcT7cpUIf17s21+wdX3CXFATyZ/AHH\nOI8vH6ubLLF7M8M4OVKmknfLA/QTlL3nl8sGfBJXqhfj7JD9FU9x3KUxo83N\nVbbrM7bVtdAKgym5oq9gh2a1tPa0vwc34tEDdhrVDelvGn/1zWXYKD1phbmK\nVB3I07tHlhz7pV4WneIK4Kl+nLGFtwHnPEDwfyJv06Hbr6tCnWVUM7KXbL7P\nIb/PoS8zbeu/29WfwT2/d9vvrdwMqpJ+B6UWcvkB+qdsX5Sg/TZ/WVhS0Vwv\n7WfC\r\n=K8r+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDELT33X+lRBR4AAm5A/Mto+GGBkR1SRBzflIn8xbjxLwIgGNIpP1TqqnXaGnSrGdKbr1hXzhNd3+SFvtW5wBg7wGg="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.1d83cf6d.0_1588698753680_0.8254587056996658"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.3bfc63aa.0":{"name":"@material/mwc-menu","version":"0.15.0-canary.3bfc63aa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.d92d8c93e.0","@material/menu-surface":"=7.0.0-canary.d92d8c93e.0","@material/mwc-base":"0.15.0-canary.3bfc63aa.0","@material/mwc-list":"0.15.0-canary.3bfc63aa.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"00c84910ddd746dddbb2d651a4fe51c784dc78b1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.15.0-canary.3bfc63aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-LiD71oAKvvuwKG3Vw57F/caVXK2HEdPaRhBy1ZwqLx6eW3wDEV9SBK2v7HZDSSb+WFC5+2y4jVd1KEggYpi10g==","shasum":"74513a72f7ef5588942922c44faa9ae99ed88a82","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0-canary.3bfc63aa.0.tgz","fileCount":41,"unpackedSize":590612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesaz3CRA9TVsSAnZWagAAhM8QAJHDj1ykl+a+Be1TWwRz\nn8FO4Tc6lFHTXur7bJ2ci8lWR25bo2Ofw3+uyOQ7Wz/Rkpu8hB6qgaXYW+gE\nopR9cq0VBVXOzWDbmqP35JaiiO0yfBtF2wXa7SAKqfjdZ5Vo+DVYeb2T7v4r\njEKXTmdJsjy6sZXFbM+MZ42c+DNkH6+q2Lce7clnWmLbEWU31oGAPQcN4Kqp\n5G3N0ClIyavh+qUGR1+qJyM+LdyDwlsWx9FGEOcxWOux51Py0XtsnBQqHc0P\neb6H9DIdtWXHgozfJVS2AKErQaoue9JxVkdFsu5Cn49HyfJjpEcqwrhTbe+U\njurG6g9dC6Q0OyPp38tfEvw+tOR/sN26ZcGhgFJsSGOIXS70omSiBnaGg55D\nopDGtN1pJs1LMAudVe5BZG1kYfUSrPRCuHspqQZg67cQnxTTZML8T7W4wwY3\nIYCij8N+UYMCY6Owm0rMmKsKwG7dm5SX6bPXDqt6+A4h3769bIi4SG+jIJBb\nAlw7KyOl0wdVx2mPBbSc0JVGm/GPluvOYrTmIV3MRlfuCyhTgtHaALdsdYNJ\nfWobjQn0gjay4beb1oe7Ar9sdLiMj14y5qwFvLwObmOgjSduJRHGyrRDqmNH\nioEVQTSI4haTGLjnLUx9TmfSNolb51e3IZnjP8v/WSTSKrO5uhyOyH+K9HkT\nzKXJ\r\n=44+7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICnTxJiSJdjOP9wTeSjhKS1qNepCzESQ5oxnXKyPi2ESAiEA13euJ9lk+Nxp2sjRYJqlLcnXX98OW91CSSWhjxu++oQ="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0-canary.3bfc63aa.0_1588702454996_0.5666722827490374"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0":{"name":"@material/mwc-menu","version":"0.15.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.d92d8c93e.0","@material/menu-surface":"=7.0.0-canary.d92d8c93e.0","@material/mwc-base":"^0.15.0","@material/mwc-list":"^0.15.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"749d0b52cf7911d260027fba833a8a291177ad32","_id":"@material/mwc-menu@0.15.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-LG3VpP34woRMrIJn40bkrEMuv8CXmFJ70GLFEMmNFYp8z53ftIxQ9oL3kz09q0mOwgyThZAKrXJbyluO43NMlg==","shasum":"f23eec7fdfd59e7268be6769b1adfc2af2642084","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.15.0.tgz","fileCount":41,"unpackedSize":590560,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesepvCRA9TVsSAnZWagAA65wQAJdLkpGBSn7FHRfKv+1u\nHQQgcuR2Y+mAOmbbuub1YXXIhgo9a9byywWEv7TaXuXrO+ExD8z1lsfOdCb8\nQdOzygWFRKCGDoPcOkAQuBD9tqpekBn3iv7ESXidPpO09h/fB5Erdtl+2frl\n9Q/rKUG+BvzIrr0Ni/rvEOpysu7/ZxjrfL5T/APDjbkxv8cdZlWJ21fmXHjf\nEPTRy+PHZkp5dKv0GEbdqEz72Wp5/eOSj5EQ74BRFRS1R50ka6T8qhDVX4/o\n6/Fjv1u6Z6Ub+f6qtE+YUm31J4jBBsT9Y8fDQExr8Dk0mjZeL0QJb0T/dDO9\nRGELwHpXVc1w62Y5HihgTHAkmBfNlA8YYyQqZmyhLEnFex2i4ZqsnGbqaF5X\nJeC0+436TC7/JBDojAfeFC3BLDQRJZoMIIiZlWh4db0Lv/ERd57nkXaqBH3K\n7ZTIpzP3CbLos8lLvFPZFIQme9+oZz0t6ysvULOLI/VNPUNU744TKZmBot41\nByG6C/GJfC/0QOJcCuSFwsk+Q3RDzMF7O7FdvtEta1OPAzQhYIwLZyj/tfHV\nkKbFh9bO29IPfZlj1SGa8qIqGcb9DVo9fiJh1oK7dzCRaj+iLglTlVPfGnOw\n5xD0LGVg9WfV0xPJwK+L5mS4cDdsUoOae19taF5lkE1Oo6gaZASQyQ7pU3zh\n7bHC\r\n=L/y1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHWLHqgESzxFMwsLeJMpeP9xumiaJS2EK7adlEh7pbnEAiAbVfwxHs7jvWLdKzPubbLXtfktZ/VapUfz84fBEv9DMQ=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.15.0_1588718190637_0.10764498296193903"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.1f4e3d1c.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.1f4e3d1c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.8135cc085.0","@material/menu-surface":"=7.0.0-canary.8135cc085.0","@material/mwc-base":"0.16.0-canary.1f4e3d1c.0","@material/mwc-list":"0.16.0-canary.1f4e3d1c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cddafa9ea64276d2774eca727578ad51fda9c366","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.1f4e3d1c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-PMJ/s6oXJzlwBG33NkaoZZ1pVYqusuT0DU995YOxSpWc+k2M6mFLFlLAfgiDKsEXDIDU+3wEHLeuWsL88QJiwg==","shasum":"527ee2f58c4c1f7958aae379aa44992efb8f6e2f","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.1f4e3d1c.0.tgz","fileCount":41,"unpackedSize":590612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszSGCRA9TVsSAnZWagAAUy4QAJXSNKq4/C8/vx62QW75\ndEMSLaFtA9ddALhm/d/LFDCQRXvf2hvbPsBt/84JCTB8UVmjYmWOq90MkgAu\nuKbO2DT0K21Ayr5KRQxagLi6O8wKs35QsbjrMLuYc7IGeN7s8wNYdmLHSDwF\nFCe3qcQ+J/lQ+2E30X5z+3ME6pBm22eVgr3VWD/SX1TGBBp27HyerMoELytL\nFJ0Z55pUjXZdLDaKvSzXVuY7cHRlJOtTK2pujLeeKVjp0A1tkrD1fRc+chy7\nqwSXBQ+s6ZHKDZIrmRggcTI1OcTvaxb0pnso2KcpUrYNE380k6ux1dsdg1cI\nHnFeFafPBNhhsw2cQ3cfB6KZcAJjhBJaA7h8acV6H7gPNi/UK1xYF4FcG1HS\nMNw0nYDQ1Zta8tiJYpyZpvnCFps8oRAoEUYthaH1lEnk0tHaZXkSsSwkVCRH\n8wuYPN/Z6yoG7UoUjx6mMGEfXSDVR605h42O2xaYbW9DtEYmNE8mMWq7140x\nxiviM+ePFPLASh1PMWv1lLzWmn2QBO7mivEyEiTeKt+1UTQtQpC9d2i7MjZz\ncASdDr55P1lnEBel1hA2yZHhC/nPL5+jAhJlc4jS9qliwEtoDVrKEKp5UIFb\nvBTwOVHmzWNjRlF3lEtqK35BpyCzW32WkLMaCqVcElklF1juN4HiXVJTY7W+\ntWST\r\n=1R/w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFn+WLtKKR8Ketki4+eZu7hPPgbEuotqkOe2Me8htfMXAiAHFCFWnLuJI88kRDvo0Tq2mFcei5ePMVlVr/7Hr07eQg=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.1f4e3d1c.0_1588802694517_0.3152918431846703"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.bc8759d5.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.bc8759d5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.f83e00898.0","@material/menu-surface":"=7.0.0-canary.f83e00898.0","@material/mwc-base":"0.16.0-canary.bc8759d5.0","@material/mwc-list":"0.16.0-canary.bc8759d5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bd62828e2f7b66a127bc0ab165f32bf39b79fb0b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.bc8759d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-j2xHffsrT7/i/cU9mYdBf2WQjMTaiJDcFRpC7+aOZ6Y6y2bZMhJ938viZFLvnzvexSv9d4MfasWleozaGUIYrg==","shasum":"43f85009197221ad591f5b0aa7a1b03fbd0c5eba","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.bc8759d5.0.tgz","fileCount":41,"unpackedSize":609426,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetJZ+CRA9TVsSAnZWagAAGf0P/j0Qlw+vN8TGAn6NKBdJ\nTJvmbDfiLc59Wjd2hRnIIMsauqvd1RQJRyE5zxDLpDV1Dim3ipZTrk99AQVB\nIQGRzoQz7SjuOfLikCUl1itFWRs3Q8JnuMjrMuWB2OKuUIcpirZwoVi8/LXk\n7PEbJ3moacgdEz1D2LXCFAuMJVyJ6AEvuQSiKsA3BUS79N2K4WPz51rmxf+X\naRwiR7XiBhVf9DIn91dtE5hBddPZWcEafscm0yz/vDXVuOzp++tA2HTWmmgh\nZRwnl0WTzNl7PrydbNypjTsbNvC02anIARnivAoqIaYn5PTttVyWNon36BMs\n2zC9aS5V92PcfNkThhBQp68sOBinez4dx5POnFRa3isAt8tSn8G68ymd+acC\niBfzpq6qvKE5m66IALHRrXTUHg26lGC7fjSCQy1KBlKqJpCao+drukJJg+GI\nC93CJizte25GPXN73bGsPBgjNYUXfLZHfqfja8begfI44sHkw6CQUBKq0xge\nzZB1PTGYbslwU2U70dnU7sKNgOxwrsZ+ux+fzyal+67m3TIG7NB7YoFB4S47\ngT8mNd5oZBVFewH+DYFgcowIJZZJxcUfVR9vuZNY4Wq0GNzjKrC1RZPoLooG\nn7M7DK929BsYNbimIBZMwUCOa5BR/Uwa36uCwWEbZG9cFwYEPAA6R71Kqaya\nfeOi\r\n=gXxE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCiAA1c7k9SuIYTpOIL4ShBGcG5v0prIjgDTGBNJoWVggIhALJq7p77PydoNYIYebEHATJ4ubMzCRnsYDKfxB0cvKNp"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.bc8759d5.0_1588893310386_0.5483371938887098"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d1379acf.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.d1379acf.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.f83e00898.0","@material/menu-surface":"=7.0.0-canary.f83e00898.0","@material/mwc-base":"0.16.0-canary.d1379acf.0","@material/mwc-list":"0.16.0-canary.d1379acf.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b322d565d0668b9f1c4054abde8984cdba4ee4d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.d1379acf.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Q8Pb3InlMzrB/yyGRorXtDmOqoMpJgZHfDZg0SNecMYIRkgZGtV98knxFBW0RJDaOGpTP00crsP3SwFvU1M+xA==","shasum":"e847060a2d1d6b4e9cb82f44aef5bfdc59425000","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.d1379acf.0.tgz","fileCount":41,"unpackedSize":609520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetZnWCRA9TVsSAnZWagAAScsQAIkKezSStjTpisZmLK2W\nh3Gq1K95ZpF2jX4coS35BpTkYubx6WCEH2gjygG97yBcny9DHxP6OmqZ16ep\nkKGebSfaN2uoge+aWIxq/A8w/g9C15Q3fowqdjvFup9HB7eyicKLdhVftPC/\nEwyjBpcH1JJ21/CIxgL7p4suY3sEuyUWwB/x9SigI+RaqHEwS76uluYTVRN8\njV4NuaR731+/2VCTZFmYI2TH5PCIMG0rh/mSu+XyQ3GV60LtW8/ZudDzU+Fi\nlyuKYTQyzspCDsLyNEW3iQ1+hwQb1eapWYAErXZXgUSSMYMbwL+JMQwyx+U4\nwYAm3VbwFR2cgTZVHMwMh7L54Vil/NEALgIBP64hHv9Up6UjLSjCRT/6DaXc\n9ezluN8EW1+cLGd5s4OUwgg9PXq1JcVeiocnomxghVj1n0pgEkqrsyFQVqQj\new9s+Ea06cgGlMjDuYdLzgHWx0OFgFYzf2QIa5+I6EGLU83EKxpW+//XsNu/\nHUjpssGq29G87Qj++7ovckdhGYeX+j0aN7Ihwg49fzWRnsgEF0y+69IeQTTT\nvINqKBhKByBZc9DUrJpao2myKJBFMtfgAXEh2s4/meEDRzuz/FnRVltBbUck\nFfbfTmP57WEy8nMYK/+OgWeJghSlIk4noHf3AVVx95+zcnL85rYx2UhWpY3P\nl1TZ\r\n=53Wo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC7Nt0mDEjBRdM0tuC4q8eA4ZAcNGrKN3zd97BtHxtZNAiAp+FknOVbDQCPbmdK8xP71S9XI1EloPGZJaz0a6YCOeg=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.d1379acf.0_1588959701659_0.4017133972571607"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58d51fc0.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.58d51fc0.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.047e6b337.0","@material/menu-surface":"=7.0.0-canary.047e6b337.0","@material/mwc-base":"0.16.0-canary.58d51fc0.0","@material/mwc-list":"0.16.0-canary.58d51fc0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"095d9f72ab7ca9994ffd376ac6b1b0daa4c99011","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.58d51fc0.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-3d8lsPHHGVkVnwvYVluggFBgRYqmOdOD+qDsxM9fFTfHEX7Fd998RiWkAK5Qs6XZYzGO/snzNhbd4p9CBhQVVQ==","shasum":"58fe4a5477fe4911597cb34e7e06b97e8967e8dd","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.58d51fc0.0.tgz","fileCount":41,"unpackedSize":609520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetbBpCRA9TVsSAnZWagAAMJgQAKGsWcJEj1zyDhkezUvR\ni0U+gcbkM2mAXB7RMUK91ER6liRpCwCMGmgAx4K4YLxfrzddoqdtHemh1UUc\nrdXVvrYnMkQDLnR47+fM2z5f645VW7Qj189kHenMte9J67fBjTCnbpxPbwGI\nkloVMwscbFa0m5r9TZSwnCKp7sRWs44caE6HFaCzZC8K58c3NHonu9Lpte03\nE/sUzvYviM4pTqItI/R/BlyLFpu0Mpyu/FtW2ropPBYvVy7vYNYcCX7/YC+c\nx67r92H1V6WZsjS/r5b7Ok1qdQyrYv+41Frw0aFNfOM6t9TahKMWErTz+Xco\n7jDRBUS+KjFg8IU3/DjPWX8l/zt0U4uxaiiPMNIDNmMVkoxTVkduqCpIqnmA\nY8UTbzas7XIr8Yik9W+My51Ob4Bh4/F5Xt6f7njoNL9Y5GvMR3APsowazUu/\njbsdowS+EK1O8/wb89IivF3ZFFPI5VhgXDnN+S6Qt/4tU+y76pJjURTDIMhu\nStvka6NAOpAYsqZj4nWZgouhR2dgUOrgdeq0Qm6az7dguJ6lWufecOXPSpaH\nt4FoDLzkKwowaOXyZs0JqhoNGcqPEQz0RghdBjMvDEclhwbhCt9Vyd8FCwTj\n+X473sIXaqym+2ty2iPpipWUWlm5+GZezZguxQPJYmeRXx15awHzr42nXymU\n0cmQ\r\n=Emzr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICUPou9HxAJLy2S9s4tjGhaMTffmyTbhNZPUa8QbrWW+AiB6hC2jI/122GJH79ep9heU7FjvYAKgG8sgPhnpvlv4fA=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.58d51fc0.0_1588965481360_0.35195719591982666"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.588062d7.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.588062d7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.119e21426.0","@material/menu-surface":"=7.0.0-canary.119e21426.0","@material/mwc-base":"0.16.0-canary.588062d7.0","@material/mwc-list":"0.16.0-canary.588062d7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b66fe2af3ce7c18a07562e7ad2469074135eec3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.588062d7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-6n7ZAxLu0pVHixTe3KtJ7XLDKLnWQtQ1ojnkfrSS0diSmyNzmnnKlvN8hJJoSADTEXBl520KuBTES1cjE7TwIA==","shasum":"eb3382b979aefc773fb2c957bb5a15c6aca97273","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.588062d7.0.tgz","fileCount":41,"unpackedSize":609520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc4BCRA9TVsSAnZWagAAJeUP/3RjcwKWVc1e9a6WD6EV\n2S42PH9d8sVFPcTlfKqWGMsBOWOvfHHn1if+1jElw0Spk0d/TSnVLUmc9Xni\nSCv6d7vdjmO4eJpMzj9w07kR4g944p8OUQCOcXPJOvyVQxQreGZCGTwsLNw4\nu+Ayy4EzKbwIgjVFmyoCB6BroHmXR3sbvo6dQCYt6X0w1uJQN6lQXSLBJayW\n0mGNHASxeBtBtNkpbom1FHZraGHG6g7y0z4e5kWa0SPg7fVVbTmnRP9/kiXw\nAtlEGK7n/G76QMELpY9PqjdqLBGZ8VOetPoXePTyhRfrP1iMR+20jT+jegIf\nCbiHtMEipdz/MEBeGb4BbLptiQ/nDs7ZyCpz/lOArqJvgjcq+v0ErI2doLbH\neNiVd/qoC+0MF5/SJkFgiakmtfE+OYGmC02sFqN1Yy4aFE0N8NWw45a/Orl/\nxfj8Wk5EogzCQUiS9gkOlG81lZYZaGaa+LUTdMYxutwML0RQApo15VnGNPHy\nP7+JAKclW7oRH4zOoHB3c3KpZcExrIeBtYWir+jB0u5e4CXBbgwDCkcUS4Mj\ndCsyH6o9q/aobqAu6cet3dDPlr9/tET2fox7hTNWo6+wk0eBSnkn67Kl8K8K\nW3yG02qinVAiP5+HGtT8v6xDC2o0+NsnKOX36uRFyzpuyRA0l3RQJAsoYTvv\nKo3P\r\n=byT2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICrmKW7uXgXVzeW2/TTvynD7kZjD+p9hmujyZMYctOoxAiEAjqJojeH2JdmKs4wVOVE3eCf4xQsEpoUbIiiryJz/5T0="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.588062d7.0_1588973056884_0.5229946911333221"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.fa21f639.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.fa21f639.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.a5aeb3001.0","@material/menu-surface":"=7.0.0-canary.a5aeb3001.0","@material/mwc-base":"0.16.0-canary.fa21f639.0","@material/mwc-list":"0.16.0-canary.fa21f639.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e20cc975825eb5a02be956c28db1cebc2f8908c0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.fa21f639.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-UJDJw+G4zdCGgyJnhXLXMGZvDIRs/RT0OcGwnTVwuRY2rLfLY3MHMp21V2cDwNp7d75+lk06QAoN1dnLP9zjeg==","shasum":"10d264d5d0c9a818bc4bf08f3d852dfa15b77931","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.fa21f639.0.tgz","fileCount":41,"unpackedSize":609520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuYu5CRA9TVsSAnZWagAAocoQAIWULwg5pxNFoQ+Prf/a\nMaaRTdNnky1ywMztoh7RL6ZNXWAnKvdRsz/QzHvypyC1Jldcg+QJrA5z+R8v\nA6JIqiYeAyQJ2cSIs9p27vBzk5iHPqeyJSuUuKL2On3m1UmjsopZEr4CLR8f\nMvwaIXfiHdW3WkjAhA+f1upEQmdHKApAFLZHFzIeXyl2JSFBytmAFRdGLS8S\nrl3OYaW4nfd8mw0q88nQpOhDPGl+eyS57WrlMKH9snVzN2dnhriHKMAcfMHA\nuy59U2OtrD+4Xcvv98xV1VMMVHAP0haUp4+PZiDKKeeplJZnZZw+y2JMqNYl\nzRyj3M11uDe7fbTPXEv2eQ1ChFM3C+QLHcvP1CZQn4sjiuOTQTBNvTw7I7Qj\nXAxZb2G1beWhC2FFZyt7UmiUrhv2I/wWLBQJ7K0BsnWPxOFddxgqo2hmolWw\np0469nkZQqBgjnWhoAYrYLXPCGH2eOTf2t93yP2/+Js8y78vePHqrK6ihq4t\nLxuJRTDSeVfnWxd9DZ6lt01P1aGTvfBhGSisbc4yeHZJzpdqLnnyvlHwvq1X\nH1WBzh10bbfcnaJCHGQb0Ir5ZKqIYvWw+nlaxo3vz4+4OhdrZwucaaoVhDlz\ny9QHHzaVuTjwYEXFjuz50k3EwcPMTyWHwSUzt0zyLnrjMJX3TuAA2OX7X+gM\nCtDy\r\n=q/Eb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICyv9C+m6TWeCoVTlH6K9HfweybinN6kkYeOdce6xyZTAiAPARtLGw8/XXs3O5pdxhPPhX5p/LxFXgnTt2ogwo0H8g=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.fa21f639.0_1589218232805_0.9029006782003823"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.2772c509.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.2772c509.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.a5aeb3001.0","@material/menu-surface":"=7.0.0-canary.a5aeb3001.0","@material/mwc-base":"0.16.0-canary.2772c509.0","@material/mwc-list":"0.16.0-canary.2772c509.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.2772c509.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-zTk0bKNK+94x0wdMqSiEBE9VRjRSHYVfZinn0MDTwMQWeGYvMbF3M25sNSk7jqDE5ffr6NeetB6wSRh2VKK36w==","shasum":"6a3a0d6a97bffdbc2d7949806a4fa6e2da7accdd","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.2772c509.0.tgz","fileCount":41,"unpackedSize":609520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuZtVCRA9TVsSAnZWagAArl8P/3rjGHcsK54Ny2b0Ukqh\nstjG5I48GJahqYnpxw7ddhQhmgQaq3wO5CdJsTBaDMo+kdJd+JrewlizfeNa\n8dXVQsreHHcVYkM7Qz+FrbZoujUpwdKlAMicFjLaC1FtglCzsFe3nSBXt6ri\nF5NXCuYizHk+6SqnKvPb3EqWVFqa23orO+gRy2d72dXLyofxbgh16e7fg/JR\n8+kXLhQx3AgNVopmWcdy5CyJ8G2bNfTcq7q2S2hXDLQoLlX312NfWwvR8WnE\n+Wy0MoQAVUHR3rRoVyKElTXBHvuFhckWhBoLbMtpbSBa1r/GPORvG5m3QmFS\nXhakrM3cis7hslV2DIwX48DTkTiO/06IBe4FPVLo+5uh7GfYnv3oHU/qq2DY\ndoUl76ah02e6/kdLuQheMLeP4aPXYTvo2sUwp2RlqQe7q7nFbyXNGnIHGBFW\n9l5Ilt5K7UTN2EwP/tRbiycbWADupGspWr+o24vJkWzS5etuxuExk8WJEBiM\nPjoN+RqsRnfrQ9xiof1fy98RQtj3X+ezsZu/0/CYhG+HWFGgdbcOt91qAITe\nW4YhnbKFem7AHhbPRV9iypyXKCzvK/mTrTgcFLRzGLSwtQZ+r71fMAn1nKM9\nqlLLcfRWpxQjNgHL+3ECzIHMtn7JKZLaKYKNhUIP0+3rW7iTyRtTq26ce9XV\n85cw\r\n=IQZL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAsVQ7lemY4tRDlIEpMFIA6ipbm1aqHyBc2G9iMJJPJoAiA4FC5h9VftvUFKCwm97X5/8uwVlMRk/vf/2HFOZQPxCg=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.2772c509.0_1589222228967_0.1656512635769849"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.fc4796d5.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.fc4796d5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.a5aeb3001.0","@material/menu-surface":"=7.0.0-canary.a5aeb3001.0","@material/mwc-base":"0.16.0-canary.fc4796d5.0","@material/mwc-list":"0.16.0-canary.fc4796d5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ddd82bfd80666625c1dcd7c92fe79f5de6f84657","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.fc4796d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-d05OI9aH+U4Ra/etiLUB0G2MRwQ49nF7eb/+F+lZWqoSKgrPMIj+qQWE4tbgTsTnMNrJldL5JHkFKmC5Pvt8qg==","shasum":"f70766822a7b7e4631dcba30e453f22e056e51c8","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.fc4796d5.0.tgz","fileCount":41,"unpackedSize":609520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeubAlCRA9TVsSAnZWagAAJfoQAJdEheEzGxv0d5DXP71q\nctxGBeGsXKaSA2mLCkFjq5x7Qp2fyzdYGtiw+uU41xAXfsq3BeauWLNSImaE\nB2MWKXdldiJCcizyl8sxUlDrf/u7+5kCOhoMkmh0tqZojRR0LG+2+Sha3qX0\n3O6dJ7E59l/DpM00U4epVMz4VtE7Adk/t/gA9Jm7m4qKxZBL3gtVtxnG64fw\nN/df7jD3U4nspNF2bGvAeW2t8O6bh2eHU0/zzU41Nl7JTAhivpON6iGdDiZF\nBKj5N8y0Zq7V9MM6i8rRaGTb+Gl2TIlxEllKUy5RKyugPJJ1xJ4j52nExIuA\nXPpUHyRl0cgu4DjweOjUUiQsMg4DMogd9fCzIl7dh0MPA7IAgMIKD87S29sV\n5svzpurtpJz9pEFEBdZHXcSJjMwd5pnGR8qZa5AXfEyYyOt9h/3ixgUf76rC\nhQ45Utq1m+8ed7LcoKSdIgkf4L0rhvnLlbd6u5WMbm9cLw6Uo4rW+RCMsW5R\n00qgPbIcd9H1fgyH3XyQwELBulcR9ZfgkzfrikQ+Mjah13q1F7jYhn3NOT7W\nvaLNO3+Z4sDpCyo/O5+gQ6qZkiXlL+2xWBCCX8LNEyAPbKDdhiXhSbfdK+Xx\nZq9Bsznt0hPEmF0W+tcyW2Jsbk0uz6BdmLnTt/QrZjWUYbSMAHK7IFL5/rlp\noWfB\r\n=O9ZS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyqYBuzBEZCKdRsiwKyBB599tHZZQjuSuZ+Z7qyQ02CQIgVbOb1zJH809MhDmxDc6R3QLJ1rln3d2seNiiMrnzvWU="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.fc4796d5.0_1589227556734_0.7473465161592223"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0d1c5f2c.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.0d1c5f2c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.ed52af767.0","@material/menu-surface":"=7.0.0-canary.ed52af767.0","@material/mwc-base":"0.16.0-canary.0d1c5f2c.0","@material/mwc-list":"0.16.0-canary.0d1c5f2c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"56733523245d57fa1e6ebe3caa22ef89bc95e8d2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.0d1c5f2c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-yP58UDYMBIjw6CBbeQPk+GHeGKSMsfy8QvBse9gnDJ2IrOmRMFAj8KSjbB0mENR2MkKUZfhjmpe7jh7IZ+0EjQ==","shasum":"94a2a8593cac7b0edc1deb52094ec62f7ecb6338","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.0d1c5f2c.0.tgz","fileCount":41,"unpackedSize":609520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucGPCRA9TVsSAnZWagAAjdEP/iK6rbaCdyJv1V2+2xvJ\nPtIO8KpLqTZYLGQBpgYSUDqmhXkV9ToJN+TLfmtYjHqBEdTPzOYzVHRIDb25\nca5CTphFBTy3rPOiyUvLeGLPjuTgAmzuT8/JA8drYrZUB/Ps7b7AybrfKWOy\nMtA+Rb1LNl7kftCwcruBZNP00ojGEMC5Nx48oj4FrU3mRoFfHkexTvw3U9iM\ny5OnMtBSwwNMPMO3eF9gip54iqvFniF58L1mlSqA0k+lLa6/T0udgokzirW+\nQqIs0O+1q+CdfPRD1vbnD1d3cgnRZWGMATQwkXtOJn9OwDX6yIlKjlPt/hK5\nVmAirKQe9ITVqa+7d05G7upDcZsYRE9StQ1uKKmjotCHh8m0G4sRLiz2+Dui\nHSivLLPRYANY7cQ7LDPSL7MaGjD+brR8cHH76njR9sysT48MI3K/HpqAG8JJ\npXZ2CP4OooTqaQHKY/IqgmPvnnEnGzmQ42fyf43g6wARJHzKhpxaLAfOKwHl\nOh80dbK+M1fLj2/Mzl0Z+3Y8p5avP6YPGBWHnw45PMq+XtzLXgw+ZWzwOYB7\nz4qj0iUd1UFAqjzDwhuOutLRVu8nfKldNwODKQvHiQJaAnpI4Rp+ApV6GH26\nH95cphemSw2akPATvtE5aWqhdV7JlHplvOLHHU2kQZ/49kmNjl/mHN+disgC\nKkKU\r\n=ia4j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmlx3ASptpKoJURE5a/AI0gQqgQ/n2mCasw89YNDSCIgIgXRg9tyLOYXTLQjdizFV9mKa74bOTRNQoVXtqQlrJMiE="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.0d1c5f2c.0_1589232015365_0.034867841105860276"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d083d93a.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.d083d93a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.058cfd23c.0","@material/menu-surface":"=7.0.0-canary.058cfd23c.0","@material/mwc-base":"0.16.0-canary.d083d93a.0","@material/mwc-list":"0.16.0-canary.d083d93a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"740c7f6a0f292b586689cce49e46a93876251b93","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.d083d93a.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-a+IdTi7GOx+q0xI/kAiydF/E0SdKIFXuu2UqD3h1boa/BXr52bDjPMSpiYyAKqpX5sMW3RHTONk3c1FHY/nJPg==","shasum":"2a46193cefee0134145c9cfd825ce469f3e1a37b","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.d083d93a.0.tgz","fileCount":41,"unpackedSize":609520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuethCRA9TVsSAnZWagAAmKMQAKQjvBqgbTsC2du3t6Oc\nh5Kw7lcTk+FWVDe03Jqh/OrJM3+fXNTSwaGgS5vuLEICRTRVSBu8yf/scJhn\nf5RUxmuLRPf3+C/0aqynWv9esSVWqZNaqTjSLqF+93eYw9C/V1LKFeD1gLzH\nms3I412LK4HrmEMdaBCrODM/35KDVLWBnvz+ibk6qyEVBcoP3nX7Dlpw3BMY\nFTsRQ6uXRoIZwDlVJtk+JBhPdIVpkQh8CGWBaqHdYyyWWNXn7NF+mM1P5NqZ\n8RB980QnMVmNGHefEpdvsy74FH/9+owOBk7edJHSu/TCNMJU5NocI1qyOM8M\n9RoA+JXk3n49ULl3F0TrwHBldK4eiFkUYMjQ3Q1GdUkLB980d1qd0P/xzcMg\nU47b953Q4qrq+ddhtz1ansP17tkNrNhQML+p8ZR5x//g07KshHi3IYJ0ayo8\n1Hizr1DlRxB2fJpKYEpE9fH5XxEVI99kfN6eAz8evioAF2+hpGIw52H4YVBd\ngUmXsjUV9I3higrXsuSU9LmFrFSz8nUplm3ir7hxdHhkTudlnlcgyMbwgbIz\n4UlH7DEVRjMMfVChCia5iuZLK8XxfgNc2t90ojX1wcfL+Se7/EN3pfSlbKvK\nNKks9yiN2zwGGvC/aSvWpX+w+xnSDve2GEZqQBDK9ZwnRDMCOhrv9Qff4E7U\nsdZl\r\n=ERJ1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCSPC4My+vBBD5c+9HT5ihvG3iEeD9TyncjPpTaiot3cQIhALJoK/I2+mw7dOzQ76RvNXs3dHByeX0YgqnRIOanYQCr"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.d083d93a.0_1589242720774_0.355036748255956"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c95d429c.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.c95d429c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.058cfd23c.0","@material/menu-surface":"=7.0.0-canary.058cfd23c.0","@material/mwc-base":"0.16.0-canary.c95d429c.0","@material/mwc-list":"0.16.0-canary.c95d429c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.c95d429c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-FIQ+YoubNGh44QjLntDVqNneYpz7ycz7w4JN6FSb4RAiuurSbzu5sDiCdcJRP4uGF/xXA2XnZathQlHt4Ot1wQ==","shasum":"644216cffab7dcbd84f30e4627c60859f0c0f5f1","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.c95d429c.0.tgz","fileCount":41,"unpackedSize":609520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuxcWCRA9TVsSAnZWagAAEcIQAJ9esBqxWGuzF0FUH8DD\nAk794dyzQDxck9l/gOQJyXDXeTQftz+G7D/VUB2PVkk6emrQEAp8Rm0ZNBFx\n3rPuiOGukEDGDAWIaqFzyImhXCSgyGe9EHRFXGIoN/yLNhf2CfsJbClG52Of\n5AgwGhWuxN0Bkux6rd8upP4hlSoffLb0CvrLHGMHIqNbeo0Vpc7/ExJMdqBB\nCjEfaG1ZgeMWAsBGV4pXqzVqdaPt/cCfXOTqSsRCDbuqoxE0B2hQnK4VgyIK\nPSDLUgAdvRpXPTxzBaBpMXTrmMeWiAstmMGx75RTpSt4GJz/OmSHOeOa6GQ+\nmpRL/EsLlXMeshBJujOay8vDjjoC0iEH5PCswDv1wzHbB0Wm72LT3ZnBNFiZ\n3eDLQIcPoB5O3HWhGUOQFNcSaJTapocaFyZ+LIIX+atZpbDAbdOI8GSBs22L\naagXxSl9DD5ROWZ9hn9AyOjo69t/uMYcQPGuBTwoy074dKopZJUSpNN3GnCk\nnoXnhQPancdGDwEBdmFJliTmFtG1zfmBzc/zps2ude92Rr5/p02FJ+J8HHAp\n+grqK2tcAUeRf3cCkr5kT7EUbDVPrgRZGHf8IYXnpcLpiem92efZgzPLZcP8\n+KeYZkMAPNzgUHIRcDQs1Ycooz3+ek0NgfzYnrd1c+ob8pV4nIu67dNv4SKB\n4Bxe\r\n=N5Wj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB7cXoDZAl9UxXdHawl9v9azgUCr7QblErC7NJA4gtkHAiBBfGqBPwqCId6xVpk4VgC9C0rdzFlmrVsmpTuktHgOyA=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.c95d429c.0_1589319445761_0.8096312186161629"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0c1ad726.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.0c1ad726.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.0a371b4fe.0","@material/menu-surface":"=7.0.0-canary.0a371b4fe.0","@material/mwc-base":"0.16.0-canary.0c1ad726.0","@material/mwc-list":"0.16.0-canary.0c1ad726.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c86cc2738d0075eee9b892c5c2fec842ae62e41","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.0c1ad726.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-OvwIKTDI0JvTQZRlxmzQvD0foXfAhp2eFIhbT0xQJNaDxdiDxsjVjZXypLwE80qXvPrqGAlBx2+YNn5MC+pW5g==","shasum":"e169b1c977b8182938ca07f343147375cf54dcc7","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.0c1ad726.0.tgz","fileCount":41,"unpackedSize":609520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeu0CmCRA9TVsSAnZWagAAESYP/AjB2wYH/rPey8E0pIKN\nkSILYaI5P1SNXnWzj1Z3l+9DALeyX3KzmkPJg9PaLfUUHno7lLPIL81lhC1B\nHMiVvVXLT5cvSm5gFDe3me+OdrI7djd19k60oD+Po+phB1Wi0mpVd/kZumwR\n/F6irIozQie8S4AODCTUwrbI8jnIROLn3N5OjAKZYnmrBhLTXXDcNgWQbb6E\nza0bIMgEcFAtmbpUs/Xa1hSOlkgcdQrgBnqlg+gYa7bYDNkuHQw4QM9621Dq\nKkqXtjeX4G1uCsVh8aQ65M2IdJ2cCLwhevHJQynpQRpZMRtAMucPM66SMr41\no2CpaHr8xxfRt1dsq7f/K2YMLcWW6JT8oXGwtW0rL7eYpEG4pKexLsv94RN7\nKE5SBqVhWBSIhdDYmbL8Lc3fDKCqLVusHxG8PSwi4zgvoNpXjG8TJPyjRVT7\nN2Ilcqv9POtxGHxn6phTf6xTsqzDGR3tt/FYo4LUKQUqIJks/FsIMtdDF8D5\n7iik31knNrYJgHBgX/TqEyUNzfBUAxU+VQyFWAvq4myzpIp3b+xDzlc7xOXx\nlbRo3htisq+YkRpPL62PY3QPhKbMfLrPIvopuiFuT7FYe9RicTj4R3nkTy1V\n+0wTt6EWzsGeYU53I2zkVHWnvbRcxE8jm2JR3gS52jgsHbl1t8r2YSKknYxo\ntxJM\r\n=eeye\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFkBPKKhHspwH4swL0flo+4+DRDpu+YAPncNjFilPYXEAiBaoGDwhUPvC/ZWsfUhXAK6lRqOXBTRssAN64TfSxOQyA=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.0c1ad726.0_1589330085476_0.4751342004199759"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.8b6a4700.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.8b6a4700.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.2139200b3.0","@material/menu-surface":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.8b6a4700.0","@material/mwc-list":"0.16.0-canary.8b6a4700.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"268d44b68432688e310671d956cf5005633aef47","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.8b6a4700.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-7vSGIQRqX1KG5A4H38rCz03XSiEdaZa55y/nJRYkeUWOh/FEjTi4Iwk+smkxWvaL4PLfGRbfEFpJH10+knGv3w==","shasum":"9960ffe59e5b74f0df9c5d67e1d110ba78d824ab","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.8b6a4700.0.tgz","fileCount":41,"unpackedSize":609520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevCw+CRA9TVsSAnZWagAA+lYP/3wkiCF2t8qPrVFoRiyR\noS3pSM5EEdXO8FoW+ljTn6VBOkzkJhkp3TKeTv6dX2zLOItaFAVjG7VM1JDe\nDKEwoZSVpZwUzO34aWq32VVRQ45x/7ZLr3fPhcnp76lF+hy7HppdgeQ4xaIs\nqKeJ4pki9VnOSE3rFgnMZVXjpo4UPvXdobMlCjK8d3FP+dgP4mTpqphRzPwy\nBIPO6M3K+Ab6769MnyF+MklTEX954eXh2MyoTSxjVaRrcXOcXc8Q+UTtfbpX\nnFrTdvQyv780cr52RhpWmh1Q1CtwaOTczq3rKeunzWqQeZte3vIeLa+9sdVw\nbWUQ0InwSsl3gUB+/QdPSghut5WJ8Nac21T+UYDelOvrea49zO4FrczZXw48\nZMUPRITtxkLoun0SngqGlINQh1ghHIFrARZJba61J72dAoXmodIA2O/jRgv9\nR7xY1rXpm6RSO05R3Cy2McGi8+XPLUGcYyCqs20OLyDhbUE4Zv82GtkMCy0U\nzm1UZ7SGP1PVC188UU5aG65SJVe8S3XGDIvZm1gq6tmt0IyTByj+kqdx+RbH\nKWr1r5kFbwax0fclOhmhOGu6wJ0umzqHRjj/luRjSZ/mP7DE2x68wE+Hm2ke\nTbwBpPVQlnay0QPexk+ldlnDuCL/ZYzD8vnL7i9FLxNi2QSecsywP7hfIkLZ\nTeUs\r\n=zFKp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEesvlbxS+tRK1LG20y041zxrsJIPEKkzn/injZC+ri3AiEAknFBX1TXzvBlCt1reY1SnbYo6FvGprseyEOsmeF1Bn4="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.8b6a4700.0_1589390397919_0.5693413446789266"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.3270effb.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.3270effb.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.2139200b3.0","@material/menu-surface":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.3270effb.0","@material/mwc-list":"0.16.0-canary.3270effb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5c72bc76b8ddfb71726f9139d6105a4b108b7174","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.3270effb.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-qe5/jeEuu5ni3qpwW3To5VXjsnTtoSmRnQ4xR6Rk6QFhTs5MnYZdmjPLMrppBKQgpAJuqXExsbIAbAfd44dIBw==","shasum":"49cfc8fb2439bbbe1227beb52725ada43daa49bf","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.3270effb.0.tgz","fileCount":41,"unpackedSize":609520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevGWwCRA9TVsSAnZWagAA7tEP/1mGZUqdu/c/DH4HXIfA\nUoCLFlNQpP7tSeKncU7S40jhxr7wuM2t5uUu0/8AXoA9qbooCMKOjTuu2Hne\n+hONr/AWKYR5CUMDLdZU3nHlC252lcKbP0kRzrCtJ3UTTltuemeWvnzC4+Yz\nIA9tfNeBYFzCRz6zle5bElC+vrs2z9UB1lJa3LOGB1MMGTpImQvTN2O2j8e6\n+bjHNCkPue68ifAu5CB/wBgxeEitCeM4rodVEvT1iT72fjTgimfBR+47DuRY\nbqAwLJZ8T7CW/KmdsRT3g66yJa5eOb2hEZqpPilG1WZNzjpko0wWUj0boA9z\noVeB6id4DT3R090RKLrY+uW63FZSi+FhyyOH0b32b04FSP3WmYc0Zi1WYDBB\nZa4vwBdf2Hn0vf3uNFDSzxHRLAzkotgfPwJs+zpY3MFYUBpHdvPMPWRX4I2U\n0oloh+t+E/6yKEBNNeOsVGlEHiHurFYOOmzTC6CySQTouHr0h6tXKGgxs5Dz\nELPchUZv/DDE2nSROB0AgcJHSOkl7Gxn/5xZdwvRXx1Ah9KI9UWWhECZTFSU\nL5wXaihbCnp8W4zHEnoSj3A1G2XyuqPxMEYp18fMtNlw6shb5/1fWbdddj3N\n/VtABlhwT9pq1KzUVB/064z7hcaUB1W2yKEOH+jjybBFWySHQfYxPoDI6lxf\nbqy6\r\n=UAvP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB1o2UIENvezx18AkW62y2tCSxq1OZ3AUwIP7C39gBA/AiEA4pCf+4N6DLxJ8SAMySOJrc7o3zbdeTjDd5bOLljtkuw="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.3270effb.0_1589405104110_0.017857529027462515"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.832e64f7.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.832e64f7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.2139200b3.0","@material/menu-surface":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.832e64f7.0","@material/mwc-list":"0.16.0-canary.832e64f7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"27f7d1ac979b6af26982de92c2f2bb7fad00ccd1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.832e64f7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-z7wBaq/yYVF3QPjYuYR8vLq8ON7ZVsqjUZdRP6w8aMh4lEhMAwuhZ3BSUlMWLaTYpJW0IEMKU9CAWnviKVkG2w==","shasum":"248bac86c30370a2d8ab7258e35f101402b433e9","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.832e64f7.0.tgz","fileCount":41,"unpackedSize":609520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevJZXCRA9TVsSAnZWagAAwcUQAJUZR5eWkJchfvRRTBN5\nZLV7QVSdpEJEZDj0seQD8kAmDmM74vbDHM8RDFt2cJTyPLzIqSSU84WSEeZ7\n61Hm2DGN4+0v8WoMPtEFk5g09y9xxf6/5pZBHN57nkRs/oD9vyXPXa6wftmu\n+nG0R8itpvCPlJnwC+y4HubKEyUundZXmPP4DSGbk38C0T9vVdoKbjQrWqCZ\nptf79LW59eLJ9F3d4quZZwXXWeYxsGd/4JTFB++ia2wpNudlXfpAjK8uxS6j\niyrFXcq4FiX6DZ24vnwzCNo6gVk+3NZ7Lnzx6AzsLL0yMAdc/BHPp9CjM6rv\nIHMT+WP1eKStsxtX2NIWhLOCkrmH/t3agLOS4iXzMtcTLLbhXs2Ifh0GLkx5\nA8RhCQNyWHh+7qo8x/lvYlHwulWomGxEfa//cc0z73L2Dab4sH7A9Cl+d4pL\nlEdkWBzk2j4SqQjca+JMjNgVW9prKfRrOxlOtfmiNp7xzhEkM8uCkc/CR8iY\nDClNNm1AMWeArIpiCRNbowtzPi/pjp7PvCu+JDk98bl04CodXa7I5dTFR5ag\njFgf97HZHQokIlZX+oYNmkuTomWTYkZOOlEqWA4NjLLAYEUOXLtD4TwjtEel\nFVpaawtQlMqzG9JEsb4+hepW79il/KGjrvfWyjGCws/+YjCiwp2OGnl/yQ8d\ngFSK\r\n=vYd2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID1hXjQyc+E0VYQUwrrfsLWCQvnaSE4CbSimU6rzORQ0AiB5YTnvuzhqZB+92dDwI5DJrjZC4UgOwtmGnLJS8nwjog=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.832e64f7.0_1589417558518_0.9820006825556735"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.472fc4fc.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.472fc4fc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.2139200b3.0","@material/menu-surface":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.472fc4fc.0","@material/mwc-list":"0.16.0-canary.472fc4fc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0eb6479ea05a7af0418b4fb939f915e39af03923","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.472fc4fc.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-euP7GGZtfqJbvR4vE2au68xcqLh3L96xK8H0E5ylpgVrwsW1eM99AVBUj832ZDkvtK6T6qjJ0QKvOrKeHT07WA==","shasum":"eaab710a6606c384f8bc77a5f2b9c1bb392018fc","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.472fc4fc.0.tgz","fileCount":41,"unpackedSize":609520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevLzOCRA9TVsSAnZWagAAvd4P/jZREk9+EUbWYQBV840/\ngtFi9wNzsMRCfWoGwwAKuBcuHvj5IUbzI3GgpyX3kiHUN/mP3HP7NbvXctw0\noGP8jj3MiFR1DnjsBqfYM5pWtXL6eKSlTNB4XpmS+PGXO5CII/+v8lgPBYgz\nY+fLcq6GpobwozQw34eU3GIIZoS6J4XM1RJxINNINPOrMZWv15T7fHON4d+O\n27Jsyqwew/eOEFzw4mcfs08cBMxHlg+d5UhHbAJTunsw6EeBfozfGeb7/amg\nE+vVu9FyAVzhgDmo4lmmFMFV+ghttaL7+cQid1wFOJ2alVnxAbZMq4jbSyPm\nSUwXTQdceOyZbBMPmkSeBKZcwuq4lPMU9YYTmu3HWXkTVjXUSgWqmMtonQGC\nFtj1BOwdi7Yfn1tcNejjCYWv51287Cdwi4BVNZpiNLrk4yTsMOXcCnE36+u9\nYes/VqPmb8oe6JXfW6tEsT+KVSe86bM6hz1isqhCIwaTKlSf9sDn43Q+xh5z\n5VoI6Oie/Z01zdYyxjZA+GthJ7Qmo0/gMQb5BAMLuFsp8CanCwbKZnWgAZT7\nHlbsRyGyaHKRIne9H1AD0/wvfNmPoUvgV9iD4B9+Co/P9lTL5bhzOM3Br/Bx\n+BsjIyjiGcHfI+xDigSN0kycqcdB8AHwudNHISWXc2/smnFWZJWF7z2MuG6v\n4DO/\r\n=SySi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDpNIAhXWht6uk6WwOuoNFSRKJ2B4H84tVP9FgDpNyTIAiEA3uAMmO3LsURqYGfJKGq8/TK0Jgy7dCPI0uEW9u99FGE="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.472fc4fc.0_1589427405703_0.7537543417457224"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.4dcd7dd5.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.4dcd7dd5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.ad0c0c103.0","@material/menu-surface":"=7.0.0-canary.ad0c0c103.0","@material/mwc-base":"0.16.0-canary.4dcd7dd5.0","@material/mwc-list":"0.16.0-canary.4dcd7dd5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a2b512eab44e739c09fa66cee4f0a65698e697f2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.4dcd7dd5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-GzvB/Zrlzt/+niWuA175m14DuNRYwrZ8yVMK84V1posX6QoEahxEWbZdQ0nLRwG8qSDCZgN7N5gRo+DF56PpEw==","shasum":"a93dea47705d47c2a33bcb44544e4df7b28f7217","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.4dcd7dd5.0.tgz","fileCount":41,"unpackedSize":609520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevXD+CRA9TVsSAnZWagAAZ3UP/0obJGo68eSLaQ3xv+Yv\nEPttT8TXZw3hEqR/zGj7RO8FFlIqH1cLqXufZ5DJE96bCeabv2ZtHDlfNe84\n0gpXvWbGW70yEJeElISeoJy/xwL2jLukFZfu36A01k7G7CQFbdwa+O0c88NM\nB57cGZzpldsmu+phYGj2j2sRbm8DYu9T+bm7NQog3zu77RqrhRjFUsqWTPxz\nJk8Zxmos4bGZOb8/EO2wKBbhx4lqe4WupqhOT6wymxU87Z8xoyVsKIPbHz0V\nEDt37waq1PZuxYURGpTAo6vUAnpGnBbNnbx0MaxuiMufTXJQhebGW2FG2zkR\n2B23KiGQdKl4H1zlyvuKOw5IT6JqJ+uDQYvuY98uW2km/+jsr5QfTJRIHANc\nGKVGRY/mWahsrcUcQD+B2pkvUspSQuT6ZJhN0mBUtEk6/EHIYRob3P5wvxUF\n3avKLBaDssc/kPp2IZFAg1gNPhfbJjA25OD8JNankvxwywWX7sxkj/Rn1ZRR\nBtJ80W5ztkpmy3QppHP/T0Fg3BgwKzKRIfBJh2PJM9a6LWcAmy2BZXM2EEw7\nMaepeHRZCiW5mo4WvH6W+pHj3TqCwyuGyKH5LdA22WQK5boabjopShBgZcEw\noiP7fGnb/riy7h1oR4Bj4F31m6nyWt6enWTZxjRRw/1ZwhtQvd1EMyRKCdnn\nWWjT\r\n=W4OT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICUgEGTE7pw24yfncwsOQE1V8NY+g9y7fSqmh85oo2wFAiBfa5ArSccqKc5zLumzd+gjUyOu5f8agTa28EGsK+EzLQ=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.4dcd7dd5.0_1589473533819_0.04723647449663049"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.bcd3400d.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.bcd3400d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.ad0c0c103.0","@material/menu-surface":"=7.0.0-canary.ad0c0c103.0","@material/mwc-base":"0.16.0-canary.bcd3400d.0","@material/mwc-list":"0.16.0-canary.bcd3400d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dad5f0740d5be7e0efe9c5037afabbec57771668","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.bcd3400d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Q/lWyk/3RUf4rwKjkWZpkwReFyiKICzBrSRaby3PpEAGLJXFRqjX8mIN3CP0pKVkyC0yj0nzpKY5phBypVdprA==","shasum":"4ed15dd9344a2e0ebdf27c98ee58bcbc12e0b9c7","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.bcd3400d.0.tgz","fileCount":41,"unpackedSize":609520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevxyqCRA9TVsSAnZWagAAQekP/R5NN+ZgdJhApZ4Dfv4m\n5by13UnYVeIToOhNjtXyqUkNugyqwzPLfTovpQlk4S4Xk/d0RyzLpdsiqCAP\nibIXN1ktm4dTyK3TbFcK6QvlmyIE+ce6H2Lo63Z0yJ/vOHpkLmsVlBTaDlTs\n6RAe0NGO0+P3y14O+vF0CMifee1CJTRcz4oo0Nv1HcsYX81PCkps7J7TzBCO\nGpvHPXXEOJF29QJvKXAk8uAFogeT2cfDjLgPk/nh5KnVYyFr6UoBB6ztAeZL\naL+i8O5TgDHbpegRgp4fVJqLTBwa4oXQP63cAepdw9BuaHS27lG33AKnIOY8\nRJwNgl5JA1bD8epDBzvjLBzkNmKehIbAFKGRepwTW/JK5JOkTjH6++i0YLa7\ngv1JZgfq9gYc6moYc6lvhOPseptOltFSwRfB99lLvX8nlRgGkWKq+ixmqib3\n93nJqe1nkZZx1EyCOjVHmmh3oHfHbtEydbkyUaAoS3EBoSbKJqqxU5SyOiYh\njAWqQaNAIRJnVQxdWD8g1Q6PClQ4GiEyIzVJIm1ZqR2CjFXqdFqDM8vkQpKo\nESw54CrjHOzrMXmwKTBe38Dd0D/0ZGSKUv4WM4mocoZS7CVgGlIgIe+p6qQf\nDNABAiek1jenoBQ7bdyc1jPDe2DEQ7Nn7YnrcVQ6jY134DHtpvBcJo6GfxDP\nAZ8P\r\n=T/w1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOycHmqIekUKwiqsTAMJ2d3bnbATdoqdnuZTlWkvQSUwIgRXQ4V8hGPJgAPw/pH8m0Tn9IRAqlouLOKJBP4z7Y+fM="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.bcd3400d.0_1589583018102_0.5282210369947078"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.91f63179.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.91f63179.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.ad0c0c103.0","@material/menu-surface":"=7.0.0-canary.ad0c0c103.0","@material/mwc-base":"0.16.0-canary.91f63179.0","@material/mwc-list":"0.16.0-canary.91f63179.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0e5622d76bebf9f0f121549fb3dfc9bce15378d5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.91f63179.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-MRBlZL9n0ZdqIaU752peP7+Fxl4RE9ee+Oph1TgonHnwzZYoXdfPVpzs/omAfiX+/fhaur5DQJqql0DdJoCR8A==","shasum":"6a5b9c0c2034ec298f5078925954d5fbb306bb7c","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.91f63179.0.tgz","fileCount":41,"unpackedSize":609520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevzU0CRA9TVsSAnZWagAAFesP/jsVq5d0GvNAvOdDK44X\nJIfXvwF5gxRYNADMJZZk+fwBlKrCo0NMlPh3NTOBfUOsqTnt+ZB8P9u71tav\nlZz2GVbBD9CIZb5QpUecZ6o8uZ3nGWBsR6wqixNbVyYlK6Yv/CZGUJzbOq5V\nC9WdGuPBnYi+XyxZeGqXO0JWHf8Vu8aqdTSlRb/h/vnSxgNnvj65JVu7oKMw\nEijqk4cSNvRIBf1fLwCHBQauY/lkkt0erYCcCrDA3qjjiTHZEvo/Ce9QC1Fc\nZlrB3wZv0foyGDEmw1puRtEXtaVYqfsd268Ppvg78NNCT5CSaAaRPgWb3PoX\n1CotpWCmwnRpFzgSvr/AHDqdLoIEBb2eSLbR77/egWRlW+pMl94ebyM0nHXp\ntfdcJoovgNODR1vrTk4FizfhGrEvmZAwlIGUpzH5M3X09R9Btl1Nba0bYWIk\nBaad5m9s1O3ESX2LJl/chV6Ij4Xaj7OG2XqEYW2NyEoZX1AQHlKh781hO5hT\n3FIfMMZRfRUCEr8GFAvGC39k4Ry0UQTiYY6DPpDG5jAc7q/QtsspOFaJ9qeW\nkCj/R94o6rcGzE5SZXDdWBHbdlEs0aNlm9ImCwUFnZ1XT2bgSGzfNdQoTg0o\nmm+IV8zTLFAFJojHLX3D3iNtJzPbUKQdKOCYKtmiWIWmmU24FRjZwK94Cy9Y\nBnVU\r\n=WoZt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBi+icOr25mCeqvnScnvggVWFFYOOH3A5wyTRcvP0k0JAiEAtMY3/nobREz6T4V7SD6eauqvtjzGpzLudPm38H05hOk="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.91f63179.0_1589589299606_0.8987816758410139"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b8aafb56.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.b8aafb56.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.fd8f8f2b7.0","@material/menu-surface":"=7.0.0-canary.fd8f8f2b7.0","@material/mwc-base":"0.16.0-canary.b8aafb56.0","@material/mwc-list":"0.16.0-canary.b8aafb56.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cb4a37dbb03476df8ec3422cb9bff794468ad220","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.b8aafb56.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-vnBONFAg8qjLkrx/Qd6Rz1ojFNQVgim2GCdSkJP7ZokamKdXYP+4hwDQMGqMTlBshQxm/D1DE8Z9NeP+epJIyg==","shasum":"98ca596be74a8ea254de176eeb8b57b990eb6831","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.b8aafb56.0.tgz","fileCount":41,"unpackedSize":609520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewtSnCRA9TVsSAnZWagAA8REP/3aKQR+/srzb+8EMt31X\nJFPMlNuIGB5JFaukGjUWt+g8aU7FX+HiEq9MoZYs9aZYdJieGMekDUiXcG1N\n/f117gikeX2HT4CbRKGxdn1rndVsWmzLIyzQPu4DfnG2GlQWng1RgLqCjzHy\nn/uojwfOjc3M8pC5nM91awRH3Xe1eHCOiW59ta21p3/auMbxtcgGf4jRDYnt\nKi50CYRpMmUnFRhAvajzThRl7vg3YzaCXnHG86QPPZLU4fC4eEl5238+BCIk\n2EXoYnSdaHtCBLzKi7e7+sEmUVHS8GOVd5yFoBhB4TFtf1RGldv0VmT3psrr\nnUwG50rvLqAPCmX4xCpcZhwi6VjK7QDPbqAAQoeT6rl8BhAIJrK484wDG7V8\nsJQh17DzqQ3MYJP6KiZVat0Kit1NUY+zM2IEKRvRT/tl35YqGhy41b+IcxUp\nRJtZrGakPfzTx88gaLpJNxTOnWO0e2CykNf0FgY5aoUEYYmKR8+/CKd5yRwG\nyqxnq4JySo6sLSybxe9t8cvbb9bQbNiood60fHDBHnSUoLsY3K+1DjPwIxxl\nLzGgrrsNWesQn1VNYVl77SEuWKTjW/cGp4joLtLqR73fcsnIzDxeGNT3LIdS\nuh5SVpGtS3KdJeqhs4v/iPp9HJ9n4wGS0vz4ZZhxYNRQ/Rg23ShhbgDfwDgz\n+MIW\r\n=9v3L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCIjt/SF2v/5BxSrgdu8lA86vZnQfmJNsyujk1/5nXm6wIhAMuMd/zB0pYEhEBJbps1fAbNd7ZzLBm/KgXi21L2iFZO"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.b8aafb56.0_1589826727340_0.4455157086426249"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.a564b194.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.a564b194.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.730920fbb.0","@material/menu-surface":"=7.0.0-canary.730920fbb.0","@material/mwc-base":"0.16.0-canary.a564b194.0","@material/mwc-list":"0.16.0-canary.a564b194.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"88e988925ffe167fc3916968d88a99b85d5f0319","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.a564b194.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Rn7QtO9wV1zAxTnwFltfDeI77hitHTYgd7oW7T9pyvTXLl7l6ClUu89jfDEzaxwwcrcyTwS9uu3FxhvL3Io4HQ==","shasum":"a69be71640738c73102ef057d319dd4a82604ff9","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.a564b194.0.tgz","fileCount":41,"unpackedSize":609520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewxRiCRA9TVsSAnZWagAASRYP/3Jmqg79ZFMp4I5KwO+O\nVPtZHKq0LsMLNEh4PmcHEIwq4+QOSuP7VCfKM7RnxMTjmboU06htz/hOP2Ll\nTFfJ0y+kDv887OlduU8MXlRH1cOiZsdxva8gYsMNul/yUAVhN6+RXhihWGEd\nErObh7W0cjovaMymjAWvC96AyDdlkfkuAAsw94KPJoxJ1sYyytMA5dIe2Y8S\njoKJSToHm4biZ2ftMvqXOszw604iWF8l+RBUiOZNT3+nnFddQAOKOraY6J1k\nK37fA1mnwm8jlm/ZHndjleJ9L9XHQQXeqiajPa/Gz6TzHX2x7ibiZ/lg/v8F\nDD/ZMlXVqSaIrqeOIIyRCad7RYPKz6QNsXTDXkceN/5ey6F//JugNzx3Lph3\nKA1RwSu3cyrp9bzaOYOtKvnb6Is0kyjZ6fb82e8c3oikqW7J6e7vaGizEfzk\n5RaLlXNakxm+AvG7wW2wWwX8kR8KG9PA9aOz4WrwLaPjU3I/TPIiizZlwMF6\nvA6mDeGvMRMZnR1lFC64nsMDCIx2P/o/6m4W4NsCyaW6wnYuQhi9T1STk745\nqU6FF3v/xZWPiowWtgJqXLQO5vAzuQ0xGp54VPL3vbMCgoSDJR8G6UygbYw3\nZDz7LTmeFi33LZ+KNv6Xyfy2z9ONOpN+1QUnWOkjJVWqkoryYglswtaAoyJF\nh2PK\r\n=8pXE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBBATBDQ4Ss2wYbajW6az4GeXr9LCPhcmt8b9A0M1sWAIgDE9DtvfFCnbjnXu8H/34vjXyfj9IF/tvzESmczkLfbw="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.a564b194.0_1589843041514_0.45117421591380524"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ef56465b.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.ef56465b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.730920fbb.0","@material/menu-surface":"=7.0.0-canary.730920fbb.0","@material/mwc-base":"0.16.0-canary.ef56465b.0","@material/mwc-list":"0.16.0-canary.ef56465b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ebf59585445179b39ed7a77dac598972ce48066b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.ef56465b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-2Q/OZK4kvwvLvZhB591Bx2swjx2JzHk56TN7njE2VeW/BznhNGG/n2UcoYypo9fxiW6NLknaDiyvGdjSY0ktmw==","shasum":"86d456ad092e12fd8a2858eb12677085f082283f","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.ef56465b.0.tgz","fileCount":41,"unpackedSize":609520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1cICRA9TVsSAnZWagAAn/gP/iQDhcKcrkUpMBs5vN8c\nRF77V+o6aZlMqVQDonHLqlqSgIW48V5HyfWyAF6kI/BZBe5Twx1drSK2zkaZ\niwPzYG7WTwNnXxqDd50xTRX0qm53Cg0bsC98KMplvLRZRTdW4YJvnK2OM6VP\nQqBv+ccVBnwT0nAX7fL8rm0iX6nXAO4bY82WYTSG9DSWTDUOucMg8anyfhWP\nYxlI8SeCtre0iupme2+igkQfS4zCVpPPaRtciVX1I7YxU3IAvVziyKIF2pFj\n/vtqGuMm5erG35EnnKQiJcrYrXjLqqE6juAgt1I4q4JF2tSbecaVtpN40gTC\nvE3FO0fLDvbrTE4Axc119bvy3kwQ1P+fOXqS77Vcc6IdgHOEpPOzSvpg+Vd7\nD9pWjtCnKxK/ysl3Pr9lK43ELJAqvcURaqzmGKlsSqeSiU9fbHX5PlrxujDZ\ne8delgIzXsRzk6LtMVUBJnvZjnVfOPzfWgICm76LEPhPGP+1rSi5yi7QoLjn\nH3YQj6vf7wvc2WuW5EWCiwOYJ8c5/NioSwsaUJR811EdGaiRUni6eOsGvLnP\nWexmh3MuKCnI78OHMCM1h0hI0tD3V+sktIt9IRQKYdG0tC+o2s2xqrn+vj7w\nSAdd3gr6oIo1+TJd0MSKdB/vtsAJhdH3YSWujsGjobjvDTEn21zsukLdnO+n\niD4S\r\n=D90Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDu/2T6r7GE6cyx+pANVj0phg6cg+2tMxINvTgvs7cMbQIhALVuRajtB0pszq+NEMST0ucGicwNySLYPt+rEKhZHWTi"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.ef56465b.0_1589860104305_0.7938318744805737"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c22dcd71.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.c22dcd71.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.4497b86ed.0","@material/menu-surface":"=7.0.0-canary.4497b86ed.0","@material/mwc-base":"0.16.0-canary.c22dcd71.0","@material/mwc-list":"0.16.0-canary.c22dcd71.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6a706d54228a517263b38bfc1185c9ebac4aae41","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.c22dcd71.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-HA8FcaDH9SSUugo/TD4Z3UIgFD+8s5nmKkdFgLcM+pb+AhO93s9h4822Ezz8PUasMikaHzL2FR8Sxzuy1DvJdg==","shasum":"0029403dcaf2d457512d27797d7cdefe1052714a","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.c22dcd71.0.tgz","fileCount":41,"unpackedSize":609520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBZiCRA9TVsSAnZWagAAJ1YQAJsbn2UFxFtcsG0mHK1E\n4Ei3fozy4q9oCfiVOLZ7dTc6HgB2zH5wogHG/7wpO+RvsRltGVdrein2sMAQ\n7FOaHeZqz4zc5hZkKTGu0J1aKrul7IXaIyAn/AjZzoMX4vLoUhmIUUqFMX9Y\nlE9PUlXGm3+JqwLiHPT1FsfMnkEg/LGoMgYEAaoApeAWbVaZSpCfNZOMr0Y7\nrySbCS31VAOb5EmkLDnWbG5CvBR9xJSNbVrY3EUo8xLCa5r4X5CoE9LuPNDZ\nmznm678wAKk/gz0RoTPAeBmSLUDtny858nHvGTMtMjH2ynTNne5HN53GCTn9\nWxLHyhJG+6gd6V90jfvGif3ouZn/zOt+C3ZxtGy6wMQDXOWgMZsS6HhhqSDZ\nwF2PLr9Mq6qlunM+oHn0DDDtBNwBpfhtmjURzYHoIzc1Yb+f88zVkl0IWL4B\nZyAaLb5Z5mA9lIH1b7MgsCASxCD36IoLXD1Y0YOy6y0hI5+l2r+S9wkNjVbF\n0VescSwFaTWt6Qu/wSYiMp4KLcEdk1MlcRQ6Weko5NsAkfJ1Z6wP9ogyuWGn\nK7X6A4FlfH897GZ8yzGG5DqjxbLqpsOkrgo0lXIDv7yfAIb0bX9LM+fPoHwx\nTkYwkoFqbr7V1sX+bG4MNk7xezQ0CPWILcdpwMVKBguBc8N3o4j5+UJYUyf3\nuzpP\r\n=jBBA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6zg+/KiZBgMtIcWOB1Z8IG2ObHFuYvbCUKza9VGq0KgIhAKygkHpGqSeWw6VjTopXnK4sv/7dArvK+3zW5HX8j8mx"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.c22dcd71.0_1589909090007_0.7234878291025397"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.6eb62388.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.6eb62388.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.e3eacefcc.0","@material/menu-surface":"=7.0.0-canary.e3eacefcc.0","@material/mwc-base":"0.16.0-canary.6eb62388.0","@material/mwc-list":"0.16.0-canary.6eb62388.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"abe9e974102de52260c3cc1347abe8592e0d5e7d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`** | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\** `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*** `MWCListIndex` is equivalent to type `number|Set`.\n\n\\**** `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.6eb62388.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-VgqHL296eb3qYlJ9EnpNeD5suxPQapvWjhsaX6eKSDw3Tnmdjcua9+R2RRu01Z9VGpxNM9yR6U4HG5xoY9zjUw==","shasum":"e2a49300d6542610f8ab22223bb69623933b634c","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.6eb62388.0.tgz","fileCount":41,"unpackedSize":609520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexEPbCRA9TVsSAnZWagAA6yEP/jnxTj7SHeL28nTN9mh+\ncHgcRZC/GL2QvTPpeUWO9sI6m2q57DG5fIDlE2AIfv/UxdZFTkq6W+dGwcE3\nLzer1XLozR/DS0FbBTvCrl6MdKuGlbR9EJjDdkgYHopBSSloKf4afT/r3ZgY\nkW6YVejHYhvoRR/PNBjZ94pIG9X73LgGUwaxNcUUgsZKBJYHI73B0kq5PfTZ\nD5YoB7EQcSXpIAyF8JR7LJDpWqgHptHIhd4a3lvDZs0PgtKOrdtxhj+zEekC\nTHMIfEI++vb0fWCcNzwPr49m/hCz57zq/roJ0G3WsTH9w8S7McYjETxdxFR7\n73QaPReuq3DXb7+GA5K3c8IalBZ9bB9ScH/9AXAVpgTN0glnNvbgt1wkGFaw\n0pqFEMbvRUeiSUAY24HsuXkJBfqbehY/296JIujg+4n93yg57Ud88zqVgM4A\np0vlwTQPRrjWVf0aTl/sYT0AuJzELTrkyvcNw6W6nY1Iec0oiIhsDkNh5yjR\n1DplBnXELiWTpCvAzlAWAo/mBVZ4GhBawMPkVMf2ybUb53jaUy8mbCLLidlv\ni1aWGGhVzS0iwmvU7BmBCk2wkRC0xR+w/XVSft+XkP1CbYMbhMzIsar6Vuaf\nFQnTF32nKW+LbFEt4BoQlN3R3a1jFAEh+VkPrURWm0+96mxdNKuLF98Q4Swt\nbDcy\r\n=1u1x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdktBNy+//KZqEqshG4lZp82Neyd6loZigWgZlnYEa5wIhAI74Ox4TKF4+3i7QmRZISDTnj2D76/mKje4QDaXK9j5f"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.6eb62388.0_1589920730546_0.6566154980603358"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.9bc3230c.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.9bc3230c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.e3eacefcc.0","@material/menu-surface":"=7.0.0-canary.e3eacefcc.0","@material/mwc-base":"0.16.0-canary.9bc3230c.0","@material/mwc-list":"0.16.0-canary.9bc3230c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f02ad2a44567ccdf91e52b6e07f5986d49d2b375","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.9bc3230c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ffEYi+cwoXd3G0uzkHS29KDv+h2IWn38msxzIcDUg8w+MNhyZJsL45dUhe9eeuAGGOh8cfkTANo4B3caqsfrHA==","shasum":"b181ae7dbd152099580543018a8717e3570cacd0","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.9bc3230c.0.tgz","fileCount":41,"unpackedSize":620767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexFIICRA9TVsSAnZWagAAsa8P/ja/m9/8R21c8PC+KOdh\nGCxij6QYdah3z5RoZ19o5spTrcuw+kFX355HcOBHBy+W6Euo2/oCBWW/Kp2h\nafOKEsE2UC1xQZkMi3n14zHeGkXYx0C/0CXFEHVQeePSSyhV+HSX7VeZm9ex\n45754gIOYs44l7aWvf2GbhvULOYLCMoySw3uuvqX7MvXkUW+Wtug2rlTnfjd\nZEzxv5mPlnZx3FUpek3ySKysivEKFVNn3Vh01kKnjjuExt2Tcvudqzp1sAF7\nQuHXoWB4ZmLob4Lu12IGYQZF5ROfJjyCVSM6aEZ/AOSyEFIsXUTUchGl5tpJ\nv75nbKvqLI75S6yk4iA0D9uRQyMgQiueKgYONpPWT8xMSUqzUYJJkpBpWFgw\n58B9+krisp+cHcOOBlgQlhWHpSe+gNDJaFVpy0HGu7L7zJ/waR/kjFJA9ssF\nwqQgcL7PQZGnLGTleiIVBaq2CoS4GWspapbpNdRQJwm/4EVquqcSlOx0MwBv\nSoOCA7CLA1G0buf/xtLLOGby/zS4/XEBr1l1La5/DC84uaP6coujve3O0y/J\n1DCg4jWdlsivmxDBqpYIkDtyEHGXd7FVHQw0ccCqY2B2M3NSk1T8T1yenOr7\nXH6y+BhY+l/+ddCYYJapipezI5qo6G6pFS4+sI/n6ISEL8jbZcXUz6kWHVqb\niTiW\r\n=lBEl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDxW0MhwXLuQC/eJu96endMHX1NCpcbfAjbyg7mi/NGQAiEAnfSRSJQUGfs85gdYRgEXdc53A2adBeLXAwX0QxSH9eA="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.9bc3230c.0_1589924360285_0.7812735567895766"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.421a6856.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.421a6856.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.e3eacefcc.0","@material/menu-surface":"=7.0.0-canary.e3eacefcc.0","@material/mwc-base":"0.16.0-canary.421a6856.0","@material/mwc-list":"0.16.0-canary.421a6856.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"caa535baf074d026cb6a6f50dad38341320274de","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.421a6856.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ELYW1kpl5BzymoMZ0oF5AAhrJtbK1yVW3L2it7IVFpaKdZb/xLphA/PRJc+9wQz4OachAJyODouY3BveVefaqA==","shasum":"094d6c3a19403bb7fdf7cd4e1f5a754e7a7d8438","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.421a6856.0.tgz","fileCount":41,"unpackedSize":620523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexL8YCRA9TVsSAnZWagAAvLMQAJXNggTCDk6F02hdHrtC\nruaUIipf33aPLjzlZNLy3ifmHF07/468JELpsVlzCRpN1rwJD4LdNOYGQiX/\nFcrugTLkgH0oDXdPjKe9zfL66p9yp+XIqrrEdYWBWfTJUV+TwUilaxafpW9F\nZI8Ruf7QlHisW1oCp1TvdmfAIvn4fyrZ/j6wlEdGRaFIMkCTWWHWRShMiIJE\n6TwevAHKVEhJ8ON5/hyw5is4h2oph8PUrbtc7X310pAeYhIz52+g8E/HGjuB\nu+UgSXg+VEPNSvSyuMw+zvhPwPblwIO8nHZdNsQk7L38khpp8Wef0Q6HhYl1\nqrDA7j8s2G7I8t9FMR+MSsVQh4wivbvNv5x6iQ3lbJeHTsAZas66D52IQ78U\nQF4TbyUHsthgXmlJ0pNWZ2BiF9EfoBChqDq+zPtPSsjnIib5fNlHNYoJEqru\nNgfWiTbV6/LJNU4s+xrlali5Nxw3CzQDWkukt9x4hO2pfJdUTCestDKGCguR\nYEvmw1dPqVJB2Ga2SE/HTkkQDjfRVdrZlmT0yRiqSpO0MZ2e4z1J56Q2IBW4\nOUmJvBKay54H4ogVMU8bi47OGKedejmPIpXRQwh58oYaTV49XTWBvUuIUZ80\nGyQQTPZ1vxoT8MZ1GUAHBD3yIMKBfJw5pkrksBTeAkL/0M23s5m+wMqpj5tn\nkCv0\r\n=pE4a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcoe0AOojQ/GkF2GpwOMk/fhq52j6G1uns1ZjjIgkyAQIhAOPPvIjsdj1eaT7+2R+7HEQS8CuzyT+wDelahRGOxPmM"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.421a6856.0_1589952280456_0.18491831482412935"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.761aa6f2.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.761aa6f2.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.e3eacefcc.0","@material/menu-surface":"=7.0.0-canary.e3eacefcc.0","@material/mwc-base":"0.16.0-canary.761aa6f2.0","@material/mwc-list":"0.16.0-canary.761aa6f2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2888b72f42dfca39ebb17e6fe3df0f964d21febc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.761aa6f2.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-FG5yJ8qf/X1Xi80HoJT9x+h9XvRO+SqgMxsTNH6321X9JHHP2vWAQzTkKNHdFG2orh4bB9g8IYzk/Eh0eQwmLg==","shasum":"fede9fd9f069a19b880990f823aa3008d473ba7a","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.761aa6f2.0.tgz","fileCount":41,"unpackedSize":620523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexaG3CRA9TVsSAnZWagAA4jgP/1QhLAyaPiHOeNPqVQZv\nkp3xByUk/tguccZFzdynJe3yzkRNVwcYhvTJ10+j6gHYKLLC9JikHY5N42fg\n2e5h028fKiFvlfylFBtykgioToY9M2QTi+lV7nW+W3ZY4lfyIf9+e0Ae1qhD\nLlbVuPpf0ihN5WIKAvirqchNOSTVn8y+Hr2GoqVGaSwjwOc9UkxfvdEYAwZS\n8OF7daPA9eC4/+0Kg3ZArfnOvu2Lvf4cIFv7qaVthcMMJq7emT9WdhpyfQ8E\n/NMD/jAF55VCyCbUbzO0qDdD50rZWMI8PITuwgYC0RvWzsdNI5GOb9gkA4IS\nzsHJqlIng8eoryJpnZ497OvSxoS6PuCuI/XJaMu78E4KTGhnDc6x2NKkY4LU\ntMdl1Qns+VnH1b4lUDYC14Wy8EuZ83bkxnFhj91tK4V8e0D4gUh+cU7MAyeB\nJ0hyxKHpjGPEF/xYt47UnzR1u+Wj8PW9rCW2IVctKz4Kr0gbM9cdYb0ZY00/\nMZt5T2xOXf5kN3ACU2WjhlmplDu0jhRE8zsgIwuhUEDCFNRYDdZaPLy2qNVO\njCZx7nTVFENPqMrae4y7dyPSM/8z/p+8cWBP+fVQWtKuMjrUKvR2AfYseLh7\nCTA0WsMB7pvQAEZIFnf/1DIxYPXPf/kZS6Fu5jiPpbmBhSCFph2kd7OmHNRp\n5FQk\r\n=kv8Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE14b6SPPKWRQXGU9zrL9yUcHwN6kR1PgtoE7JXse1tGAiB6Eb37PH48Y5W6WfBRL8ZeXJCO6Z3E6dZdsc+sutwhwA=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.761aa6f2.0_1590010294639_0.16135914919593275"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.f8654c40.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.f8654c40.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.4ebce8d78.0","@material/menu-surface":"=7.0.0-canary.4ebce8d78.0","@material/mwc-base":"0.16.0-canary.f8654c40.0","@material/mwc-list":"0.16.0-canary.f8654c40.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3b845b0ec744d5631e466e04412254ba2fba6ec1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.f8654c40.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-8XCfWMGjkfR10jIhnTq8fLyy0EtotZgSTyecsdPCye81u/YKa36vCQNM+iiGt9WEm1cAUAOgc9RkZ4pncUE1Og==","shasum":"3c60b4e3d13ea3a6cf5de0b454442bfedeba7ad2","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.f8654c40.0.tgz","fileCount":41,"unpackedSize":620523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexaPiCRA9TVsSAnZWagAAVvgP/1hf9/f9o8uUsceHnJtJ\nbb0IU8+O1DLcFy1TiLhwVMp4MbxpOJjcNxpQ9eFy7gD8jyJHbLpuN8Ihpx7F\nO3OPalHtPInpdF9iojs9rlQVuYeGCBXcQCK9cvgbIFFrAmr458wMm95FSTmB\n5q66aQ/coUT6GrHIzly2qOLXOrAc0brPumv3tDhhCiwE9qzsTBXxqNfiWerp\nzzWuD+AOBhAbgj6kIyXBDgTKywN30o6F7vVnYHnUnqrZlyGF4q/x9RwmgmW8\nyTo5kQw9kuYXKlbyU7deOb6CEDnmhNujH3rwyOaTII0qckGCT5Y6bwjYpvdg\nPwAGtXQQvYbVQF+GZg/ANZZ66gdw5wEkT7ZiC7Wksmbho4AtxdW4w7jvY+dj\nlC+3xGYWFpUe2pPS3w20GpXgkJFlSDtHkc40DiNdNw+GYJccliqX9oE0koLa\nRorrggPa3Cn7Lju/bSOVCGfqP2qtJp+7R0LF2duKDc2Ou7ZPT1qV3sjnq9Yw\nOngJJG7KX3XTa11GxaobcmZicDzBmhUjN5N9E3J9svDHO301buaPRc2quKQZ\nd340Q5KakSWPj40W9CepKVvbvX3diBr9pv+9iGIPIG3j88BO6yxjtJXC7QXs\n76G9oRNXVheTwf6fF+0FrtN0w/Io2W/9q1m1JADKwaWt8DzJiDvaNyxLSRNv\np1YD\r\n=rySa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDL/TEj4XDGkwjF19kQrnZVwgK8vJCjvjaiV0PPwckmIQIgJRH4AX3KYRExk1U+usYscLLI1asF2QOe3ES9dxMw0oU="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.f8654c40.0_1590010849656_0.8399251275181052"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.05f3853e.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.05f3853e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.c67667e8e.0","@material/menu-surface":"=7.0.0-canary.c67667e8e.0","@material/mwc-base":"0.16.0-canary.05f3853e.0","@material/mwc-list":"0.16.0-canary.05f3853e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.05f3853e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-uvhRSABzSlfoQWqkuq3USWGdVW9JG55CEC6gqCOIaWfMc83Iy4EXovfEoKWMhReBL5Vpc/87iGPSi3vKxDtO/g==","shasum":"0bc5e7822a4002a3a640e1dcc00b726a5de2ecd5","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.05f3853e.0.tgz","fileCount":41,"unpackedSize":620523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrt2CRA9TVsSAnZWagAAvGQQAJpFHOBwLBk7BCsvM8ss\nRL/YHYFIzSfOg6MzhN2oQaqd3SuZE1sljRLmLB4Tc4I0hDIYoGjE+OpGkz2t\nMewk9Sb/G8dm7GMjnHCsO2nAX1XeF1WXpU9GXmXSLgeV+9+FAZI91rc/cmC5\nW+yEcdOuU/WDNzFhTdsl2cHKziekAKPXeXnQ9uA7k13CZmoSjRc5BFgSmo0Z\nkbuEPjyj4hZTWflhrZV1aJ0iPEludO4FrPf78+TxLLnzlZCQ0PyzXC5AH0Ea\nl86ox8yboDYVK7RlFDQQLcagfaiyYDrYZVv/qUrwBPXhhPl6dN1oOI5+0Lp5\nvZEZQcBsvFCpmL04q7yxnFOXJ/HYK6xeCN7MvyTNoS83AHUEooF4SFdSsxfu\njzVM9Ydx7dEknsq7iPrhrp3mbzYZVRU6QdeAK326p8QCFejOAOtP0AbhUJmK\nK8AiNLceqfukNyk7cNKsm1E2eduv/afVjMwoNMkXQi301r4XIAWwR7H0RCMD\n872eGPa+i1lCO+f5FPoYs/wzlCg43F67iKYq3qbt6HMcbSFg37oaRG17NT4M\nG3K0ouLvMEZaERHPew181Km80R4+5rpZb4HbrvxunO+suIUQPW0R/9s1Z2OB\nQ6O8/ik/Qf8IV+DVErq5CBNlna4FxThl0Ho86jbh1ekigF6ZbjwSa2GbXIUT\nq6u0\r\n=VVqe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHoWjOKEumqkLntFM+UdjC1y6DGdL7rll4erVqql2CPxAiEA/CFgRO/3hZ+OGFZE6SOBymUu8mPcVVAX5kG/+NAtikE="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.05f3853e.0_1590082421874_0.7680144684491135"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5fe61f4e.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.5fe61f4e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.c67667e8e.0","@material/menu-surface":"=7.0.0-canary.c67667e8e.0","@material/mwc-base":"0.16.0-canary.5fe61f4e.0","@material/mwc-list":"0.16.0-canary.5fe61f4e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b3ddcc96480928cfbc9538fcd5a840b5ba5205f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.5fe61f4e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-6M1QEjmxrI2J4sdW0JXqcbyLe68idW6yDwmfgWaTNqb1VkGrC4v8lpFJDU3ojhkBp0ezRsnD9xpcbodE9UYR0g==","shasum":"e0bf12dc15db7d06c7fcc73bbc07504279d98b61","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.5fe61f4e.0.tgz","fileCount":41,"unpackedSize":620523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwnaCRA9TVsSAnZWagAADzMP/258zowSDbJZ2GsXlNqa\nA+VgzU9cur2O2HyEf679gAZRK2XL5F1qEZU7qYeg6TYaUhn6J4rGWWBZlj+a\nT427OkvxkEQcN6OXPxzWgwB5Jp5mVeK35oiv3MfbuXkdPqmQfunemGZAWev2\nFwZefvYJIupWoQKhWX0kLSB3SFjh0LHoDLfN5A7bS9+9XWStzexfB45H2D0i\nvGXSOsRXCaObUJMerIU+TEcFir8jHT7baraWl5Hdy7tk5EXkHLSMs604Niv9\n2sH+VOnG+FPCXZLif6Prc8tUPag1HM1O4mPz8ufrNV9I3loDNTIbWXDoGbRm\ne7RWz1WP/kUkUeQgYYYXUEie8igdfHo6Ce5rozk6NL9H5hg/eOTA+pTQSEGV\nAWu1HjVGMZfy9cHztjb3dc3q7EtPILfwlOwfvnEw0rOM4vnqnfJPj0GLffWh\n1WKA2jGdUPTxgImUJsce+Mk8hW1djE7RJmZMPQfv7gcSmebun13RorShpTmV\nWJJji7avx2tTR2VUeo6Hitdsl0CFS/PwCqvvO5AvF9iUh0KAzLOuGtS8rRS2\n+zqnHbBTk1upx+BQNxjIK1pY03fDt19LSpoZyxsKmDM3eX3YZRZlrybh8Dkp\nLrqBqo8I0p4lqaFsfIIzqS7BzJ/num2+fOwX4NY6CEPGreq+Ez9wUUiwLz32\ndr1a\r\n=p3KI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGoBZQbakjeryt8vVEhFxhUBDOZ7GLd8K4FayENn3kWcAiBTn4HJaST9GlrL3KZTwh8p0cscCNnrUlaXxPGfHhWfJg=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.5fe61f4e.0_1590102490011_0.4469998886394537"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.17d33745.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.17d33745.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.c113fc942.0","@material/menu-surface":"=7.0.0-canary.c113fc942.0","@material/mwc-base":"0.16.0-canary.17d33745.0","@material/mwc-list":"0.16.0-canary.17d33745.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b97ea4369af06c50f10fd7a5fedf708bbbc380cf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.17d33745.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-XqmJ40DmHBs1+npWZ5+2ox26H3VSgGKBgC/1sg9NRxSPwTSqiN1Jg7UHT3lKTHKpRc09aX1NbiUj5aAH+gb0hA==","shasum":"63b53fa9463aced96dd4b5cae03d6f5a0e6a12ee","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.17d33745.0.tgz","fileCount":41,"unpackedSize":620523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezUBbCRA9TVsSAnZWagAAn+8P/RsfdhzADoxI/jELjRQC\nBafCKNYJMiIjTL0adqpFgfRuyX+DqSaK4CzcGe4I/m3hRFKBCUIY1sbSHn3y\npP8ZplveLIL7dXp/1OzNuM6VMUdYvCn6ta6jagR4ZSlCdGjPByYc8qRmzXE4\nNORzhy7Pk3zR7Wl0bpuq/vYek3l727e86hi8NyofypZM/G+i+xi53i6jgtFV\n6YbcFDAl3CSHCnYFcwwiVyjpohFn0ZlDGG2uhv5/9Jnu5oORwAh9MoRjJ3Fs\njvIYu2fOSV6vCcqARCecT9WZS/7ikokTmU47bUbQ8reSOeomkn0F4ETC6zBL\nZIrQ9Vtd6En/nOFAXwIqRJAX7hPQ0fcT3SKVjsMkbDIDCedUbDWF3wSCs1nq\nZ1wj7jli3I3dfjkDAfmMa8vXt/SGs+2ai47Lx2WcrkrlyDvLiM1Nv1nzQ76e\nHW7RJg/pFdYx7evLES6MPfiyEoG/SR5scbFjahsmJv3C720kiZgTdTMTsShd\n4Edxp7TYElFbZr89NHFoWKGCkb17NrCJB50XBTDTvoVGyvrPyfN+SkzgVhTS\nWXltkQIwWUPGrww84WvbuEYz9QPCN3WMflt6dm0Y62QpSdHurnT0Hf4c5XJu\nnVKyEC3YWzgqJJ9p8xGQOubfaF7i6bEKjlOa528mtVILsSunNU3ceugfiA44\n26ro\r\n=mO+x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCb/pd5Qc11flmLaQ0bWrB3s51tKE6ehVKnENra0E9hDQIgcBNhwnIaB8ouKXXV7ZrwL45knC11fcTOIynfbh/IhtU="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.17d33745.0_1590509658683_0.6343728314026544"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e8b52f5b.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.e8b52f5b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.c113fc942.0","@material/menu-surface":"=7.0.0-canary.c113fc942.0","@material/mwc-base":"0.16.0-canary.e8b52f5b.0","@material/mwc-list":"0.16.0-canary.e8b52f5b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2877bdfbc0560854bc1aab7aee7ca63f798613ed","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.e8b52f5b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ihmLsbfjrxuuNCOF86Cs+9v8j4o5lN8GYXzOKHKuNmY0wV2zRURZvIYxTkL7vJbzDMPlVnNq/RH6rAVXFvgkeQ==","shasum":"4444ef16777e659ef339ef8505d22f1bf3ffb18c","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.e8b52f5b.0.tgz","fileCount":41,"unpackedSize":620523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWNHCRA9TVsSAnZWagAAtisP/2gtHq2JnRG1BesR7ofN\nV1xYOw9Ry6i57vLnEZ66XcJL+GEYmmKPzvUmd7HZ/zEyRCHT7oaenjVQTPte\n0ICU6EKAHW/I8eQEzOlfCt6BiDvKtpZFg0LXRYj0J9k0xgUxqD3If9iXOqQr\ndrCQE10qfhpWhuqy7Y6SGg4aoaNehS3F9YAijOIW4eVqzjlUhTCPxQlCitVq\nKFoa+LrTpjhFV6ejOWmyMbgInhdA6S3gDR5J+vXRUeucAAV1BD8yiQ7Vy6bD\n0Q78zsgh+vH3on/2M+2Z9gvXcIh0q9RgsIpaPPJNmVs0kyXZLhx88LEPKUHE\n/yi3+fK41P4t8Y3POCsSkr/99yHoiQSfk+tI3AkP4++YYy4Pp3ckZjmMd70h\nY8K4RdVNTrGZn+C8AZmYDpK6hsKAjel+0l9CPHyGgCLxQ8hfO7UMNfAAV7Py\nR0hj7EeOzXLk+rNaN7unn5R7khGf0PLlQbpRMa8vemmpOpdUFvxiZxBUhq5K\n94ZqbFmijJzzqOad8eI/m07dRpe6VMsXjq0XVOVL7M3n5kN6j9lsH5tIx6L6\nXbvAkcb3M1uXaTG1+4P+Nr9LmBVP96K95KG2aZ6HWOru2Mcf3x/RDHR7MqJ2\nQzJxQpA6CO1zPUOFp+KM6Ubf2ItHx1gEyy1ElvTddG0paiyjyl/r3Ms9m7mM\n1/J/\r\n=r6kx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgQ7T8I6eW7teURdpPK9ayMKG1JWf+4uVJeh3Xhhzs1QIhAIIznGNcyag8rqwDWmTpuw3KGgYwpWlQ2QCvyQaGH085"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.e8b52f5b.0_1590518598980_0.05772306187513965"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.09afa0a9.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.09afa0a9.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.01de07011.0","@material/menu-surface":"=7.0.0-canary.01de07011.0","@material/mwc-base":"0.16.0-canary.09afa0a9.0","@material/mwc-list":"0.16.0-canary.09afa0a9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"924f688ba033093a21706afcd1d5b3dea4527355","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.09afa0a9.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-7LbpFhf3jSnBBvdbBO2CkilqxiT3PCUMbpZx0rfqIX6XKww/3FeDC6ZTeGP3XF2JAeScqz5hUfEAIqlPz7UE9g==","shasum":"f8f9f7a2b1c0f315c5d98d4d8d070efb102f1d9c","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.09afa0a9.0.tgz","fileCount":41,"unpackedSize":620523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezY3CCRA9TVsSAnZWagAAGrgP/2VvchRIB9X+2bgm8xV5\n4qvR0dLxnEvgChl2pqiN9XcpL9BWUprx/xAKbca5KnyAF6yHK0KDvl8hJjtJ\nyGTwLNuggtM+cq63GreS4c74oWPI8/14lGhg8c0OqtzGUJUcvmRj6OZgA3N4\n+5AfKd2xTFm+JrLHg61OPSSw6o4FqYUfrkxDsLaCoPvOwHCJZ9pbmYqVYzKp\n8kspb9pyw4Uc9O0x7aOVNTTs0hTbWDaNrplAD11HCFGrjFYuFCsQLL7XyviX\nNGS4N3NqEDEy7IM+ogT6LzEZ1UmRgmWj2PtPyGgvlVaVYCN1rjBphZXWNPAQ\n+Ut6MmrkwGEUcUHgZFj7bZDHqZ13TgjOlWyQm24KwqnshLqD9ZgOzee5/ce/\nPN0fahkFGu6OEKXjIJHPDxzAIwOU45AYYRm2t3Rp+tJqgPDJ5LJPlp0MXDmi\nMMof6sJArvIFy0UCRDHkQMUxhkb4lBV/whn2Jl1DlblCQ5TEk1e7bSBukLHo\nj2Dc55zNY2Mzpzair6PahNNtpTF5jGuhZK/E01SX20CPMxujn2VkBt0FzdR5\nQWRXJT+ydowBRZjNaJhHeming5EXXL5FQ7K176gwdBheNGO/aCL998A8u+qc\nTrcYj/Qet5ajvZDLzyMWEIo7z8lTsLzLACzT/1E9OaNb8I0fiKtqORMYo1Fx\nFDZo\r\n=lOo5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCixY1XGfiQAnl3zb75g+N0ykDoDOXQi8ZJzRTL0YiE/AIgWLQPhq87c7c0yCyW+vEaTTHKLDEg49XziHPuBM2tStI="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.09afa0a9.0_1590529473794_0.9158296038929332"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58bc9166.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.58bc9166.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.d91794c7e.0","@material/menu-surface":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.58bc9166.0","@material/mwc-list":"0.16.0-canary.58bc9166.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"71845a1e43b7378230bcb8e8fec40f195da11c2c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.58bc9166.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-SDjjU6hbfOno9A0zVqZssX6524QCF8gXPgeVX3yyxESr3lilu2GPrwGZeJVEIBYgtVFN0ydbNxLvKIYMrUy0sg==","shasum":"4f5c65c3aa4f5d0937eead6dbe6c58385f78c964","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.58bc9166.0.tgz","fileCount":41,"unpackedSize":620523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezbS2CRA9TVsSAnZWagAAHdMQAJtvlr/tVsi3N9O3n99l\n9WUBmito2pI4TV4EY0KAZUTz1BsEuZN+CF/UrjpNdvgnnlNPPdYm+UzxViWG\nzPYHp7zbZikuzuqg69lsFiWJy3eNVDpdHpNJl37b1xSkY+UIWu7T0n89+tLf\nt9TgoQGww20yc1ISJ7iRYdvI/hzhfACB2dlj3CdQpM4uyIw3O5EZIEl5wzAo\nv8IZkpl5ZxPOAnH/fJxcLAzWidOHrtZ5OyMpzYI/5hsLVgEH+ns0txIsTdr3\nhBD26sU4+pCSekA1XCDNS66Ok3q/CeLW+o09Xu7OAb7AnDOnhfg5pl519lpj\nlqG6xPGvZH3FMpFg/nXAhDQUzQt+k5X+5MuC56EcE6kLrpB8hjRJ6h9SYGp3\nR2CrM58mGITFE3U9aN6Iz0vB5aH2etInUPMvx7egfXn914y+vw8xGr/oZRJy\nVokNOxK+jsXmv3y2rSbyyeXTfC103/+e0MCwAlaPKPtsJH2mectWNXAa38Qi\npzzomNOnChYicYl3K8ercMEeQC6swfpEKRRc3U0E+SRWe9um8uVP6lCcLtaX\nuuTs6XK8PHVFgkYpGNTxcil8A+DujrhMp7pKqOAvwv9DQoQIIwsmtArIUMOQ\n2bG58XU1kgU90mdKK4X6VL0KmuJyHIwmWFGlQlFvnRySF0nSTV1gf1TOZOyQ\nf6DL\r\n=5Yp3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICbrmoRsmHN8wiJjTlOA1WdmlbI2UMTC6x7/Ko40TPKeAiA8/JQ8U0JfRxpk/nwcB44FwCwTAGVjcjFVF2QJd3X5eg=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.58bc9166.0_1590539446420_0.8276657513730774"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.43bde144.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.43bde144.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.d91794c7e.0","@material/menu-surface":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.43bde144.0","@material/mwc-list":"0.16.0-canary.43bde144.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"eb504ac1efc09a16041fabd1f3fbe62a49717c77","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.43bde144.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-lmeSNK7555Ir3ztzdLY6fs0CvGwMxeuUtQLgNbi2CVmS+jGm6YHBT1DQ0Y7ZkEnuGlv67Frg9Essjb8UxeWMIw==","shasum":"f36406c176368397bb8b8ef9208579038259de49","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.43bde144.0.tgz","fileCount":41,"unpackedSize":620523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrGWCRA9TVsSAnZWagAAOcIP/2Wzltt9spwWgxihrLu+\n0Sk8X5ZzytCLz1H9HF5OAMFNAnqr0YR918bzpnYHeqEkAz5+N7qLqb/5WiV8\nGRdiyEql7eMmPWl+MDJ8oEvX6vWqWeBW175PJls8PU8cgABzt3k8X5F04ycX\nsMh9smiAzg/2VBXFOm+FdjF8sLY4i0JB4IEItGh3wm0f61CHE5xlK4iMEzyK\nF+fnE49rQb6KUnVO6ed6B9lDRxDWMyO1VpP7abDB4QMv2yX4OLvXFiDJF1xg\n50tAK0hAYEC11oezrj0Vbs2vtU0s+vyEo9ONMUxwMNdRbuH6GKF+08WyFkGF\nP9BFV8mgf/yGiWctkldDRkWaUIH4a07FHVZ1llHCWP6OxuOhgQ+Ftw3aEajR\ntGktGC3EH/EHF2vJ8hbZan2DDWF63CCKwPoWmUljPriekUXynxAlr6FYkFm/\n36qWumPx8fkIBOsQL0OZoW2MWOwSIQr7nx5zooA4yzWTotMU793LD5xl3vvA\nreS63Vg3cQnSeQKtG8CUVf/FKO0iqvrJPvDbkqe+7At5islTEsA0qAAx8GDT\nvG0/2G6Rsc1whXORPbSq3f7PLVJqyh4KSvSz2m98suOFzMcXBwv5NpnAqAuW\nfz8DsAzhzQHYpFrSDzdbW8qmv9moHO3VZvoNmauN14mAlmllgapBnLmVF3ln\ndWc0\r\n=eXU0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA6PIsfEzXIKpjd71wgCO8JIQ3MnCH3/Rt1/8c5NSomFAiBpuK2TGK5tQeTvCwRuT97bfol2NpPBmRDBOxNF98KXWQ=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.43bde144.0_1590604182447_0.22721982515005434"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.51067bbc.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.51067bbc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.d91794c7e.0","@material/menu-surface":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.51067bbc.0","@material/mwc-list":"0.16.0-canary.51067bbc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5dc99bc495fa061e0960f717c69cf33620115937","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.51067bbc.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-9FCTw+peHoVshYpMwQUiTOxWm/OJkcRPytv4VcmhJXTinOA69u7brsSuCKB5yILreKZOdWpuUS/9lrj3GHsnAg==","shasum":"e1d6167b8c80a40ca65e9b7b53b50a1816824409","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.51067bbc.0.tgz","fileCount":41,"unpackedSize":620523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezsecCRA9TVsSAnZWagAAfKwP/j9zxcMJaEOHJGYgDIr8\ncLoXIAdNgG1LXkDx8EFB8L1UpOEhAvphz/c6OGDIN4AR3ijJoblR1cR7Fcih\njw+H0mVWan2x2C7GDr+m4mMdctBq3IY6yaoPRcESWhuG3mefPMkdfuXK+PVl\nAI9BeUOGpefw9iMxIUVL/gRNWY7ygZlEA4Ot3SXD8HOw5k+Z/qVNzcYayL0f\n3PljVj/R7Gu3Z/F36GY/JthuAqhMUSPtmQXbcMu74l2t7SNohDqyun81Srft\ndc4nOYU8uW+LPfDStdqhKKL17aYoEKageqKaeE8BzvlzVn7kBUuWhVZvTC86\nJzD7oepeRkl1K3D5xkpUkQ9kGE7KqofOpWdCWSjGpUHLIB+6Xylwl6mr1/bT\n8LJELSTv4yti3qatiIGeByYoVYT77eHOTeS5f3gyMl/0Hyl8WA0vPXOAaJ3C\nkC0z/kIb2m2pyYIJ1xShtET5ouNYrB+3Twu8jHkrNp/h92jLrBL9+j9OGdNK\nPInl8A3TXOYRDicae5CjD15maTd+ui4EzQ97BiMqNkGRTmCj52fQb9oOq3Pu\nzzPCa1m/HSQ3Qoq/LvkEEj/kYPUwknTy+FcvBilUcn9Jkm0gyyMI+dl4jbyN\nb9s6LLz+vSHlEubGRzeRtlcv8o9EaDtTGfern8k0nCj8et6KwxJG9b15ijEL\nYkY5\r\n=ESzE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG3aTjy6b4f4qhfJkjJkDVJXURxPuhnyRflXCUHq3cpwAiBsT61FzypFzLpYzz7X4hZXvm4pNH6ItIXAlnMY+pPuUg=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.51067bbc.0_1590609819840_0.8127031809902281"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.92751ffa.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.92751ffa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.d91794c7e.0","@material/menu-surface":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.92751ffa.0","@material/mwc-list":"0.16.0-canary.92751ffa.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"534233b7f60f5860c6a4bd35799b98a3c5d277b1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.92751ffa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-/2Jp+kdJQVmyrQ8yWvTxeco07X0ngbVBGZjxhWsTJOmvKOKjn+r2ztN2a97ySpQeMqUhjO89WUHHSLOfBL7/xg==","shasum":"34037ac4ed7e722bb5b298ef8b2c2d0f3ab5efb6","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.92751ffa.0.tgz","fileCount":41,"unpackedSize":620523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt17CRA9TVsSAnZWagAAPtwP+wbWzTDHlKPeonypoLWv\nRugZeIH9KokZhaom1xDNj2hiLKV3gau5u0fseFSqXZk+zM8pEczje25L3tIe\nAhElskwMQhKqjNx9jIfIXs8tMhsb3a0TmRkbM4H8aQGa9+ZETKs2GoSm+Yz9\nisWKSVqW7QQXIX3pUoRi/KUtk9t+2Gj+VHqwv9TtZw44RvxYtaWMdMNkGYFv\nnaic0CcW0J+3sGjNBkRibXk76EOc2CUQKCzthycGkJ8h/lIAwAaxEDHdYGy2\n7TP8++uaH9Nznf1jjKV+aW56kHW0yyiliQrCaJFdCqF15lSrQBt5bfdiV966\nDaaxOj/ann6HJkjn9cFaO7w0ohGmy82+9VhXSYlAM8rV+t219KgDXmDJNPoH\nx0t+jhdnuef52xWC7vmIuMSJhQX5f91v+gIgAbxAqLivK3l2NLayJu9P8SpU\n/lybApKLEfXRY6TvoPxVgJr5hU99BMXypfh3m8gvki7F+G5Es9g9PMDf4kaY\n8ZSu4pywotLBoU9b4umM42KpL26CsmhN9LWeBZJvi6nSZ6+3KrYJgMfsxszr\nj9lHQt9WXNia4VK+qx6qGzHaEHI7jg1opWxdX0W9kDf1lKhHq5QB2lXSMYq5\nOE6Gal47LJGlDOUvIFsZeKKIPlOqW7u0Air/ZdOl+zsgfEP+uNDevQz7f/E7\naZC9\r\n=8VXI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBey0u0JNpskRh2cYmDDxT9+kgGXM71hyqDpbkfjMEWUAiEAgavKD1tR9MpCIKQlaRJbUO6630lYcuf9fSiKygv0vGo="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.92751ffa.0_1590615419015_0.1151324103994189"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.aa2b40bb.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.aa2b40bb.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.d91794c7e.0","@material/menu-surface":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.aa2b40bb.0","@material/mwc-list":"0.16.0-canary.aa2b40bb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2da9556d449ea1f3ddfce5e0978fba83f759a1e3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.aa2b40bb.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-c8w9mkaZBQrhpnD6yB7mz7WtMi1ykjE6P7diui9psGfulrZ+tf0LWdlJ3sawS3h3Dx7IJJqN9aL12Ss3PjQVXQ==","shasum":"ffc07369b4a6d494392571c89f4c2bbd0139ad0f","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.aa2b40bb.0.tgz","fileCount":41,"unpackedSize":620523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0A3QCRA9TVsSAnZWagAAatYP/1hWmKQb/YZSTpZuy1Lg\nbD/0H+pZizSOKhY50XQ9gBn1oH1pwgusbRfBqwFHwjzpn5ycxrQvlRvvuZhR\nu1zcSCyaSWsmsaPg4M4mfg5mjvzmbF9gfUHDYDpeC4773L1Iw3XXcJ0a740o\n4M7kukWGDuajMobagy2CRaUNbjm6lPKvGUbvfafrNx1NNGYgBuBK2Ayr/hBD\nQ55WG5+7bjJ49c6J4tbEdViSr23jKQwHHlEsiMXrv7rd+9qXspigzk+Mwzjr\nDsw0mwoUmF6yUjV0nzkBfkBvuwzotFHmMhrYixj0gu7cW5qB8SAdGN6jMxiz\nMc7F+24+jB93kkZqVFqqDwEQDE5EXHi30GTNFr55LJOY5136lM70ra0EZOTn\nuP5UXJw5hbInhUC/+7ebNk571gvwDgwAONkGTGqzKANrN9GtWRqJcymJKYPt\nAYLTNpIXLbRTxTXNEfMgGumqVNFQGno4tBst4NRt2xblScCywOr+zY4uYBpp\nHTcW4k8cxWoh9/jbTDBa3/HCCk1rwyT4FI5jSMa6dBQ/yZ6aXVzTu6Si3ZbD\nf4as5P9kawYBiOuHscDyaO1gh6g4m9fzOsXSRlJCvPwdR+E4jFocIt44lQhL\nSD3KcjRRXn+llYA/Aw/Ndua/FgEEWvHXp+JzEusNezKDvpHCs+TnisXAgeae\nmDXY\r\n=QRPK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEKtEF7fX+FsApJGOtYJIWirE3S3E9cVvaRjJQommQdQIgCSW3NukZxTn60qCdh4NHgfhxo7wRXCf6mweNJzq+fcA="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.aa2b40bb.0_1590693327712_0.29324754503206996"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.1a870a01.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.1a870a01.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.d66d22bf9.0","@material/menu-surface":"=7.0.0-canary.d66d22bf9.0","@material/mwc-base":"0.16.0-canary.1a870a01.0","@material/mwc-list":"0.16.0-canary.1a870a01.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f9a61196d2e2f42c5bfffe7dbe30411a16b908a1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.1a870a01.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ZPR6OMjq0X5XNPv8tHfeafsgBFQXCcFv+ndC9vcEV9I9UbbTmtVxy1z1qGsJy6i0AeHHmYMQ/BBS+SdK5bWsqg==","shasum":"96672a39436a2ed6757b94368b33d90c3924f1dc","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.1a870a01.0.tgz","fileCount":41,"unpackedSize":620523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0CrGCRA9TVsSAnZWagAA/zoP/RXwrENmfWp+2+t7w8wD\n7h29aD9me54qejTJcA/bJ/X4am+xfIKgNYmk2Dvh7wbNAxmRsa4O/V8Uqvzp\nGSAjXjZDZE4reKDC08yWaJnP4B8xO4HYqWGwTLJMQGrrDjiGm3IbBenWwjVw\nFXQ7BpQ0Z/5NoV48jKZg74+rQRnSjoVybjv7jzqmnGeK1c5yIna5yK083+oB\nVTB9+XQXxy6mCbS2Sd1vSy/pbvhKVkQK3XLDTEoHbiZhB90Z7QWSX/tAi6OG\n0pfUuG6fRLjCUmD5d1v9cXFe0O/oB/KI1DruJUDMnx0/fchTdAYdKAyyi4It\n+DWGmMuaQijjl6YRuE/ht3M6cLAlo2tl3Ms3r7VK2wpIWawHEUW6TsVj9Lps\nGTUlVmFHOXsci3WSyBjM7SMfmchyw8CGz2eA1SkD5tP9ZVyz37Btlny7KSmS\nUIGAMu9f8hAfQdUhBA+LSMZXazNvexPDxn/u85spi9eFf6zulApy9pNgb2AQ\nL7WbfqLXUJWqJy9b/ctRxtCE7vWDYsgpNg9M9VJMp2OTLpPHbuTGBognXIOn\nzsDlxbVdyJnhsmkMSCHp+qwh5NFoQUvXybjnpgMngQrAeoRvPB6dLk0IYLVz\nZxjnAW5FNfg8IM5kHA8uRflTpJg1O60zdOAj0RXqY4MSPg2KN9a9hoij1iIs\nofz5\r\n=yn97\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/9SIo1yiG0VdzLrQlQH6Jh2ZU47/X2S1t/A0y/D+4ZAIhAMxSDHgEvCgNS9BNzoPPf9Yldj+tH3RMSSgfaoq3rtmQ"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.1a870a01.0_1590700742420_0.19500609450928885"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ad57d086.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.ad57d086.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.d66d22bf9.0","@material/menu-surface":"=7.0.0-canary.d66d22bf9.0","@material/mwc-base":"0.16.0-canary.ad57d086.0","@material/mwc-list":"0.16.0-canary.ad57d086.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"718a29a398b0baad30119bd852a5e1bf4d8e8e3c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.ad57d086.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-KquG2gkf0DpE/iVPDEdwOxcN6UyRSDmKqkzmPJlo/RVEZYxoiyp1e3CX6SW5gwjITZ4JU+dx6bF5NPbzHVMTEg==","shasum":"ac515c3f540b65658b03b3b2c47d82dc68ad750c","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.ad57d086.0.tgz","fileCount":41,"unpackedSize":620523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Z+QCRA9TVsSAnZWagAAbZ4P/0oYkPyMH8cW0eIt/stu\n4H1/Y0j9e+Z0tiiS0RV+1eme283HXQlRZRFkxUJb+VtC31BdUiDRqX3Gx1un\nRyr0wQ3dzzT7yU5FugnrEzPKsLwBQAq5WvfBCXwdoc/6AK4KvoSwrDpy4jks\nDGrPEx6saBk/ahR0n2lCugEPE0mgfYLBnBVeFwGvKxAev9na6VuaN5PPcFcp\ny33NyBd+z4CTWp7icmJHAaBxumtXCFJO9cPr3taJOJRPqCHjqFki1uq6e4LQ\nQHRDCIjLumrWJGYPAukbvXh6KXbGpEV84LhjL98RvH4q/uGLOILfz5U6NcP9\n8655vcQd/kXdFxqDH6DlwYjv9yoBLAgDQt1uVdG15n92f/uyTtoxoZclZCCK\nuwtCOjyZN8NfmbGS8LOhvGpBIJnDuUq8iYYrh3eruYWRIx8acD3zgvdeHRKO\nvkK2x2run0UDMF8ZNz0UJzamAhGFQsgpVIs+PzvDvw8VQcMJW47O0m+Goyrp\nROQnTjyYd83027Kd8gOP+E2dxW9DRqMTARxrkAYcaxIDcuuFEmJomnNmk5vu\nYk8e47/dujebb96enRW+ylXoplRGJ5egAjMY/WDYQUChrUiJXfLrqk8H4IQc\nAjGD8bc0F+TbAc6ooe1gr4K6MweKUhTzZ+nebsDr7yz+Ynv9nb7oTXGOrbAH\nbERF\r\n=DsEg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdICUow4Suxg3ZVyzj+77mAWYlmHhrTjbe/nrmb3NyowIhAKDrMD0EZ9qmm05ixJJSSSGf8D51UeJlQnpxg4+RbcDR"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.ad57d086.0_1590796175691_0.3545672766233181"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.3bf2b4d5.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.3bf2b4d5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.8073a20a9.0","@material/menu-surface":"=7.0.0-canary.8073a20a9.0","@material/mwc-base":"0.16.0-canary.3bf2b4d5.0","@material/mwc-list":"0.16.0-canary.3bf2b4d5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"796a0757a7808c623433691d3c52ef63cda47751","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.3bf2b4d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-cMy+RvIBstHZb3dfV+LCSxNPX/lGIilosykZ+hFbD/Qg9b3QRfPJrxyUAezarI64TwVAQlnAjKWvGP2P4oquPw==","shasum":"31a29357566d3530596622a5fa8f5a3cbf95a705","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.3bf2b4d5.0.tgz","fileCount":41,"unpackedSize":620652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0aq2CRA9TVsSAnZWagAA3fsP/iNr4GmBlZkyrxU5+6dx\nF4kZycIQwojmZz0W2XOY9NNl2ev7XxucElp0XWnqkwfU7XqfMbze4UL2ShOU\ngMKJ9p5ZeGbJLCEQNefLKBTLQy3U7TB9Z4MtwfH7M1Gk4xn+8JUT/Mn9qcTk\noPla2eB0/BGVSVZnDqNJ6Wwu1wE8F6qePu1HKJNH4Pc2vb7kV0Kd1eMMN68l\nGYLxK1++cc64uABpdwaacQACXHLbBOLUWKyu0yGxu0KlHUGHgtY9YiXtdEaO\n1G+tGcKXnF6GjC4yhY+mTg5GMKjcqh6NOSe/uvSRvRXKz5rmE4ER955n51VH\nraO4MeA2niwtfmii2woFmEbidKA/Vn7xZjViI7wYy/QY4rbVCDqmtLVtAm9Q\nW15gsIBIwQ3MHhYVOIUaeWm+n2qt4cFZQwiShXr8haS9CwTzLJHkzoN/CuA9\nEF/u6JwNcaI2szmONzqv78NXNUdtOuU6densUsPwwVEX33GlLh967e1TUp+B\njbenqxu9sGGrPxOqbBubbd9aREeaRKdM6hTRxGeiCo3xQXMui29pZyhyRZYo\nWywFNFOifBJLb0zWVjVlMlQp2Xx6FotkVVX/DzZ81n4xrA2KZu1Z/W6IJA9W\nBrVf442b4YUJyn1HO9jJKwHeuAbomLnRzu7rmvHM9pGh9wgLtLLlo5fDPjZK\nXlFD\r\n=XG72\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGYU0A8u1GCs/trCiY6GXisVLOkNGazNF+KQqIkFSH3jAiB/mITh4nFhqV6QRFdDDHWDi7y5pzrvdeew3cUWCmtm4Q=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.3bf2b4d5.0_1590799029710_0.18447595957065888"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ac05f090.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.ac05f090.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.8073a20a9.0","@material/menu-surface":"=7.0.0-canary.8073a20a9.0","@material/mwc-base":"0.16.0-canary.ac05f090.0","@material/mwc-list":"0.16.0-canary.ac05f090.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dcf12105ac71a486ee350d7b7fafeee2e7fbba2a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.ac05f090.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-GoLnQ+i70jZDUSI2Rd0pvtJSOg0KpmeiCBFb+X8HgEt71lH7NfS3vBr9T8fqgqax/eQezRJVdJae4+ilCUv7cg==","shasum":"4d25d1f469b95b0a3541f134c7fa875ae5a1b700","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.ac05f090.0.tgz","fileCount":41,"unpackedSize":620652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0cnoCRA9TVsSAnZWagAAlm0P/jOjdxrN4OiPwEgTanf3\nRa6kxqM+fX0nvvCmJIcB2h8bGjmR/U3/TiP/kxwgjkI6XPfMaZk+6T/otBHV\n7xuoBVxPgjMdwkQRrypji5o9jvjgJxBKKmQA0GeBXiPPaGzQsXqdpNcmSVMR\nzE2Mb/daTNkEnzMw6v067Z35O9j3kTbeDb1eY+GiCvYubabug3qW2I3nvjdc\nq/B9KDs1RnpOnLtLAaAbSKNBxOMppB0kKuL8xvvNQIETeHCTun8l3LiUohHZ\nhWLpQDWDRKbroOKTwdeF3fBEep+g3zMk26za65Qyc/kfupsctHFdnSleijPV\nYCLS+ox6vBq3R9aGRhvM+SRnr7/dqBlBLkSf7owEVqitkjzs/i4NIfEbaZom\nCJzGcpAIrqst7W5gH4RsgoJ9oizFSJjrCJBWxbGka/+USooo8gpS8XQGy1Y6\nigPFpDU070SfiX63exrYEFCTGmi4jJfR/+BTfBvMPyyz2rsa3RgsuxSP02bB\nmCEWd8U9Suz9se67uBnfWatRbeSzBRKWZgyzTXQmwH4ICTJ6/+KV0LM1vQIr\nf5UYtHAqanNp5lmStMLGpxTr/27XPnlgDyETPj8zjTvdh8DIkic1/yWhkR5j\nCo9QfbQdcbWmK/mt92NedbILlMCu8/3BsYRYblPVgGrf73IR61fsS2XGu9rQ\nEIu3\r\n=Pxjx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDa3xW+pDOLWyriWcwfI1UaWKa+3lJwVsGrt/5K+ABprAiEA+IUE1GVZg7Vsr8p2rQbn0VzDAvQtLbIjbizbOCmY8GM="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.ac05f090.0_1590807015887_0.42417342708728745"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0ba7b095.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.0ba7b095.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.8073a20a9.0","@material/menu-surface":"=7.0.0-canary.8073a20a9.0","@material/mwc-base":"0.16.0-canary.0ba7b095.0","@material/mwc-list":"0.16.0-canary.0ba7b095.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ea87617c8c9beaed33b593554f344296ff2b1702","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.0ba7b095.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-y0hBp3Id4OWp3FBSUJRnFF+3Q5pWiFX5qxia8nTDG5Ijqeb9Byvcv40hXVAF81S645rf7NNukGy0+Q7v/K4CoA==","shasum":"fd651df04da653c601b7ec96adeaf9ea6d953e56","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.0ba7b095.0.tgz","fileCount":41,"unpackedSize":620436,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0ct3CRA9TVsSAnZWagAA1HAP/2N1naPIbpbeyARfmdLd\nqKXhTp5qpjQGiV4q6D5ggBFiJrFUq6F/rfh2hs2ZVkb8Qd2CUXZ0t/td4eyM\ndnZzsPAUZm5K/ssofs7uLC8hSHlxLjixcqUYoHLyb8paKhwCxgFDRSUDhqx2\n25XVlWn5281YNOttXVcNilSFM8rXZwD2Mg/TPko2AySBlluRmtP2VpRmsFLH\nlVbvxcHVZ1w2NzgOPq4BRR1jzDj+JHnXeXcK7kDak+73WkbKBsQeoP7sf7nx\npvnD0t1bdp70lgA6lri2RCpVnHj679mRTqls/cAXExZhLOWQHkX7dXNOgfW/\nJO/83hQHh/CvakyFgRVJMXf+gcKVz3VE9CtEcZiBq4UY5cK7pUx2eAGzuIEt\n97acHvwM29LFzwc7zPmZeN0QE30JS4pchxaVWLJd8a748OlskHzsG1fnWbV3\n0F2udUnJC34hm1R5dwyfofZ+9qWQ4H9UKMAejVAErh7EW5cEG6/49CRdQ3C4\nz+Km8G+C846UL9X1NYkwt+nQt+TmfFdMkMzOjqc1bCwEacSZV9tg6psdz0OF\nH8s/6oLvTewLPwIl/bgSa/eJcq74JXxKRIKAVm2phzppfkYOftdBk8UsYNrB\nsLAKFCAYHAW8eWGf/pv57AARekW79yBLSuL6Mk9h4FvTnTepK1kYrotD0d/G\nIChM\r\n=aigx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHBAQPHF2A3xe40jTkVudzrcKbogSHM9/w59vHLmMCHtAiBnN9CLhC18ES0U+nCF6a0/GMW7J7iw7SmCbe1Mi1iL6Q=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.0ba7b095.0_1590807414730_0.19916020772335874"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5eaa9bac.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.5eaa9bac.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-menu.js","module":"mwc-menu.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.b9776b1d0.0","@material/menu-surface":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.5eaa9bac.0","@material/mwc-list":"0.16.0-canary.5eaa9bac.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"971c5d20ea684615fa18f3c991d77704a2435384","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.5eaa9bac.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-F+WPHadd4445LrRAVTYkaJ/6BABxzmPoBKprjRvMmCk30bTeqjqMb5f/F0a7/Pa/8M2o4jcfs7PWVQQjHgcEIg==","shasum":"0e0814b938d861b7080fbc8aa085c5250ec3fe87","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.5eaa9bac.0.tgz","fileCount":41,"unpackedSize":620436,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1Y9RCRA9TVsSAnZWagAA9VAP/icsTGbpFH2hQ6pw0ZR2\nn1iTpfkBE5md80RcVMuRvH8cEXVD4FQ5O9B8TZIg1WpIwXG7b29yTgXtffNW\nCir7ByRf55qOuGvefzbk+rWacwRxRq3rraJBKXtravllWQ9sRSjWiP0QW6e2\nTPbSaEGst/AtCIzq6CdhhYuWL6dkQFaJ5TIcLmMAwIRvu9nf8nddCbLLCwlJ\nQCTwwXd0ct+HPWfHT2LSxajSWcgeUoDXsRv3OPeLyiYay6JaW/5QbB3yGMuY\nNhj1QzpHy9CoOw8o/06GqzMAP7ofO2VI3o/LjGI0fszyVtcXcUbzAI6bKTNy\nxRrMehhgkqoiaxwMW8eQdEvG5fnApOByrSt+1raxZ4mEKKHAD3KVoDBq4EV3\n2zWX0/Eiicwn5SLoENkvmfRnyXJ4cZfg2pNMu1DhmGrAJ7pIIS+OfYGXrGH7\nKbP68SwAhJHlHuxLJTefqa0DLYDsbxq3OvFHaZsh26uM6xBPsmS+tGkRk3BF\nYebyKmRk+pjcnVDPVZMg/BkfOFGzBo1Pay2o7Bxx2j3IOf01TVxOQ/L3BOhC\n7B+o2M9hq96PygcxFtnj0y/oFtGMdNV8jlt8gxRlIMZUlaajqdFmHFJSqlM7\nWRqDP0MLISzus4BilBfMHD/ZgOwIL1JNDtymlVmPfMQ+t0p3nvTDSZlc1g+R\nqSNm\r\n=+1o0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDC9klnUmfBlLq/8XwTepoyFMUyfla+pCN7wlddUuO+rQIhAP1XktkQo9ScTos1WeDo4tvhD+9klyuJMrOspfygn0sc"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.5eaa9bac.0_1591054160731_0.40846062186206034"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5677ac20.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.5677ac20.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.b9776b1d0.0","@material/menu-surface":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.5677ac20.0","@material/mwc-list":"0.16.0-canary.5677ac20.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"371e5022a95234955de71585477022efd63b4645","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.5677ac20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-3Q6orZvyaVI0PmNHi3N9dFKaOj51b2opcuevGwtq9J+xi7VpWOeDwZPWftfowcRMtd5kQa4+UmQ/5TQqoC+Oww==","shasum":"c65a66ddecda2466f19098cbf3e25f278604fb92","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.5677ac20.0.tgz","fileCount":41,"unpackedSize":620532,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1ZX4CRA9TVsSAnZWagAAjloP/j0lYI6R9VlnY6GOow45\nA0UuHnCVo59LcMqYZGBjqBo3J5NiB1XFRqKgxxYX/yKj+ZlypRpxoK+m96Rg\nVXAxKfWopwyUv2t8tAvd59UV2JJnIUDkB5nQUPGjx99uZPhiXrrNWbFE/UZG\naBe92hi62QHsUQVLHbXct3l6ZHcAhtBeDCGBO1Amz4CCGVydSNJ84ANTbWsl\nigtXUoJhXOj6dlj3i4TPXgkw1HfqIBsH+vgK85x4UWzirs5qJqJxaGlNpKIs\nXcS2pdG87cxtXE0mloLGNYczMRM23ltBfQfh9gnVA1bUKQv0gF1tNdfDaG6m\nghm2nsy7E3RjvrthE/Z3sT2VP3YlLWVG4hGci6Xuq1EF5o04jbisg0DNK5li\nlzvnA9syjsx5I3VzcYXGfGAB7dNdaj59FG7MjBvEalN7D7oUfeqz5UZ81FHR\nDvPVZHKYhkpMbFJKNJuAqQRn7KfnoRSs+qp/fym/Zdf2pbetUAR42mtco+oL\ndXFZ+fEtgquD+jWenMz0z8fL/oMbYuplWkylkEaYytNEleRy4n/FELWLXtWf\n28sqCLIxb9mWNYBLSZtRv34u2Ns8KaB9z/bPyRUJ3ZneY1jHE6N/0kToRvN8\nYv8Xr58HUSxq4ir9knuCGJBKvXm34VtlMD+RPM/TqgaOccEgxtwbEKAdWHr+\nMNbO\r\n=wORH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDJ63R9FooyABnq9XJHewk2G3V/lYpzdyPNi9bugqi4LAiEA1QUSDQQzJJGEZzu6en18MX2k3/mOcfnN/LRy+aO+A/M="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.5677ac20.0_1591055864242_0.2673710466438768"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.7ac6bff4.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.7ac6bff4.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.b9776b1d0.0","@material/menu-surface":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.7ac6bff4.0","@material/mwc-list":"0.16.0-canary.7ac6bff4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"393ff5005fafa04ca276d60639975d8bbe851f70","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.7ac6bff4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-nlmJvYcABFMgBDSbkPv1rmB4eOcUTyfUDk8HOWD4lhU9w02bdgefS5aA2dktkEeGz9ioGcu1bxqtWiAsmZL44A==","shasum":"93ca6f97f9c657f6cd67d37baa39701a527be551","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.7ac6bff4.0.tgz","fileCount":41,"unpackedSize":620532,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1ZpFCRA9TVsSAnZWagAALUwP/iYlHPnv2/A+25ckutbL\nhIKSiVZ6Lw/UMShWL7Dstyqu0eqTobbV7eHqTG/SIpN5S8uan0pBWlls7sMN\nLcV9dHsJPVGRa2x8VZ6L+HrdOYDaAb/DdbaZibUlAQWV0nUoxYNLx510Xqit\nDCFduJGUgDPHzHAhWv78IoSI1vdn3KqXmgg6mwNvSQvSFmfkTzHQ+qof5w+J\n8dmasJR68fQz/sKyIbCP1k7ISc5OtUu6nX9nFsZb2ChF8+oVq6g0a+bmRD6W\nESjuaitp4mr3JDbscs+XT7L3hcHN7cxcmc0xOWaQUgbXLJYL5Z2awQ86Iyf8\npmshGxAfVx9vnZeEi+/gicd3zU5GN/xp8UalcvZWq6t4zPfXvlKgPh2oiOOI\nHKFxVLhgO8+3J3NjTA1K1gPjRW4xAt3FtzcYF1/AEYL/6BcsFBFAmvu5guQ8\nbrraQ+1y5ivj04KLE/6k0ekdV1pWHKk1YD1dvNBeJVXutf2G0hoHU+JijRDs\nEdqFbbZ3v04NTAiOGXwLPmcPG5QETKl0vC6tLnWW52uVSaDPSbMp/BNmS5fj\ng4ZTsbqbjYiQ0JzND4CWqR/gjgioRWzYlOqjDWpl3+ARqA4Dfo6nP1tK42sf\nYN2FfzoqidT9FSspvHoPla1+2FhHiHbe+f/OrJ5uJzrFFMArRifh5uUoJ+E1\ngra/\r\n=yBVi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDTEyf/fK79V1p7x9NSqYD3PS2CmN9k3QyIeMopFxRLsAiB1A1JivOLshHRX5hFqBwlEsHiZCsYS/qY5btZTyl4wEg=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.7ac6bff4.0_1591056965054_0.12232943075532132"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d45622aa.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.d45622aa.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.b9776b1d0.0","@material/menu-surface":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.d45622aa.0","@material/mwc-list":"0.16.0-canary.d45622aa.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"ec53ab9a7c87df6783ef1e555aba6d7de86c46eb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.d45622aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-DQKV+QecJoVzJ+bF8vhj9WcVRpf5xu5ZHbtCZxo8ay3vuw4gWqIa37qhqQbyBfVxAMbVG2b54aLNhoYZ438qgg==","shasum":"e85cb81a49e8694aab527cf2a9046320f8e06f9f","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.d45622aa.0.tgz","fileCount":41,"unpackedSize":620532,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uTNCRA9TVsSAnZWagAAQBwP/0XXRS0OG8vNTEC8sl6y\nocmLKFSaR15dFOE11yM8kxV6B2JWEfwljOYBzrJn3ctLCncTNIJ/dysi119H\nGufKLseMh3rDUHsexvVhnrQRO2FUgycu8H69c2IDCOpUCy8gtHprrWZ5kfYA\nQqPyVXQO5KnpcY7zszYecDoHxRzyNDSeflJBMUFxaj81MhseNCJcre8TOwLt\n+QsFflYRnMa9CG4OMrc0ARj3xuMaIjLd8x763jOQP6ES0VRtRWOu+x0G0w8G\nmMVSHPEj8eWKaCjl8l9GXh68fEEgyE1M3O3pZQxdtxpwthOOAXEpejCPW2ru\nBShsY4gKifjUHfd1+65Nhcn3eTJutgO/ZypQf1LONOYC0dtI4CYVNmjzXZWt\nmntGDuR6xSeY755y4lnN9Xuj5ObeLn+LI3wGk+yAxhATtjj90rDc3oQesSS6\nGjcCQz0M1n4N9BvV5zagoc5paVOqJP0rZ0PasVgZJTCW5BAgKQeUjIuW/f3l\nyimRATiJCEmLWdq6B8RCtWWoJ7lFDqkaNH3YhPY/C9qbJbhVt9CVGRjyPXXM\nI8llRkfXg2ro4rwXrG2Hh/4g+qZkyrepefjCmBjttz6ldA58Rnwzt6zG5B2i\nLFIjFvGp4Ac3CeB2LmM1kAqqfmF8/iHBcwRY62wQr+fQzWYN0Vkj2SLsP4JR\n+mNd\r\n=n5Tu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICdZJZ9kz9i3ZygsfYt23B6+Gh50ldgbBRE6Xc7YS8y/AiBFEZDyBY8W44ohIqp8hIYGLvCGHmiFuiEWjMlDTfHJtw=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.d45622aa.0_1591141580542_0.10002539747191874"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.dc26c709.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.dc26c709.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.a0dc2b5c4.0","@material/menu-surface":"=7.0.0-canary.a0dc2b5c4.0","@material/mwc-base":"0.16.0-canary.dc26c709.0","@material/mwc-list":"0.16.0-canary.dc26c709.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"58a25b562ae31e6c32c67599f842dc6bd1f86398","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.dc26c709.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-EJ0Krh1bqoFxbxrTiww5zgYWtMSV5eWoKoYLfG742HwD/ZHCbOdTiJsPR+8zS/BZYV14x/zt0NnAUOqt0J5mvg==","shasum":"4432fb951b94b313725bb09f9d4d35e3e4662080","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.dc26c709.0.tgz","fileCount":41,"unpackedSize":620532,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2qlGCRA9TVsSAnZWagAAjEgP/0X9wTNgY1dJiVaLsrF/\no3diUjuMeOHuVP82ZCLeRbnmHMtwTs3R4tCsPqJ478+IUPJ0yYKnc+z8r9o1\nGd7VXQh/jpoFhn9DiTqCq4Vx2sE8gV/BKbzOhkJm9hoRLyg2e4wvPGSoii8e\nK7ZoRpmpBirv8aPu749dOWrv6PvKvpnnnQUHlVUPlODT+hWoJAo02ixcZyX2\nDCnrR5+UUj/QdN9+CdH6/JjCWMzHjlmDNvpggUX+m5SL/gq32GxKjJSUQFw2\nlAWaaXibaej1PJMMQn0X7P/IFfHaaeeUJPDr6sdJgYgcvMxe+uBQ+OyzJm1o\n9/OA7AZ3OYvRvPekrO59cr1MDd12zhjY1IIa2zbt0PYGVEpKjbHYhv7erbIj\n06TRv9jCTpRqMu4FUkg1wAzswPQwSosWfSypi4nrqCXECH8ULuc61j0gdYub\nMSUHXzEqETYgeopOyZECNbC3XGpsYkNRtU+L6nSwFLVCu1ITQIhGmbUYAKIm\ntjDwSFVn8C4yzCLOXVz/NOiPvw5IzZubikITY8dP+jHR494bQJ1h0Y+d3kxW\nNqQ74qVX9VavNHJk519R9tHyfTEd1wQM8KuErQ2Qw+fKyq6acneHb5MHBIMf\nqqYe8LfjR0gaSfPhbjG/GOAH1P2yv5/+J8icL1t0Fs+PgqpsoxBB+6qB6kOV\nPuA6\r\n=AdO2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/Oy6cnVF5Y5luYVrc7mpfvRqur8k+6VYVWvEpvBaKkgIgAlWNExGOI/jeCpbuIw5k3/loC6GLFS0PvsLodJOaQDE="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.dc26c709.0_1591388485596_0.01103821245449077"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b9baf6db.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.b9baf6db.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.a0dc2b5c4.0","@material/menu-surface":"=7.0.0-canary.a0dc2b5c4.0","@material/mwc-base":"0.16.0-canary.b9baf6db.0","@material/mwc-list":"0.16.0-canary.b9baf6db.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"911d44443a75be4f249c595f2fb8a90e42365c6b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.b9baf6db.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-EV/mSfUWbnP1h5pL8wkPq20YETP83sSkEBU8O11lzhAkeBSDlD/LoAMhj0X4K+ckWeuJ0/RmbORmYKE4zNh9Ow==","shasum":"4dd3b02f985195708749f9fa6320617c1ef7bb94","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.b9baf6db.0.tgz","fileCount":41,"unpackedSize":620532,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2qmcCRA9TVsSAnZWagAA+bwP/2nzvkXoLg6/48VQ/E0e\nuO7rEX96LAiA7F2O05+KIBt+qFBIwDybJfskAZdOIZuwGPNWHfUMYCZppiV4\nm72pIUlt07KaUkECvElreCqbhCiWJwidY/7Dbnc7Vkj9xjTkSJssj5/OWuQz\n8WrnrW/m2ejbv6y5wyCyiV8V7y7rI+D61nwKaM6J1aH0ANlBKpkBJEpfLY7+\nL/kFuvcSLnkBfSIE9Va2RDYy32SbKEEqjtheWec1UpJTe7VfjhzzdqbPFBMd\nL6iKX7yk9edvmznMZtdn4RYo+nrlmnTrD16dO1fp04yBv4oF3YmLhpm1yc1n\nNBlefvgN3DcW+GqIAPSNxglQYxYIjz+TQk2PP0gtGKQzfL4tYBDjt7pRzi+H\nsvbNeDnwc4XlGTJNO27IoU/YBohvhyGr0Sh0it9q2bTuXk82DV5jAx1e9CzA\nJTGYM6Av/mKR1YcMiwJE61HGbdcHL4XgsqvlMUynu5NmErZKuJPFMJzWOd44\nZO9gsWuwk3NdSg1i78AZu5PBMkLa0VdtjHOUSdlrF72msmq/d1e9XEv3zFbL\nT4ePy9NqJhXBGZvjtMIz17GisICkZLc+HA9LSvRwuutkCLMpwWEat6TNCfaK\nW9a1VEdTz+5AlrfBIyAKtyOtHqWzpJ347WBnN1VqaPZFkEM4OXsqMDZySOeU\ncNYO\r\n=6YdT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHf6h5ynFcE56YmmCKXw3+wCO6jH5XCk6kLoyDBZGiB2AiEAnu9RYpEDvXL6d+ie9HglU8moOcO5eI9/Et/85Jt90es="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.b9baf6db.0_1591388572433_0.7266690034019008"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e0b8c9d0.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.e0b8c9d0.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.a0dc2b5c4.0","@material/menu-surface":"=7.0.0-canary.a0dc2b5c4.0","@material/mwc-base":"0.16.0-canary.e0b8c9d0.0","@material/mwc-list":"0.16.0-canary.e0b8c9d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"8067f7c0024a048e98d327efa458b70ed21da6e5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.e0b8c9d0.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-KmIKFiasFya3eslV6/FyrXNH8tEP+YdfuIofXCrq/cXnYl1tUGgGjIX+spDTtTMl5qxW4oZdY3o02jOJUeSVIQ==","shasum":"fbd69f2c8d3df6bf66481a328c2695f9ff79109b","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.e0b8c9d0.0.tgz","fileCount":41,"unpackedSize":620532,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2s+yCRA9TVsSAnZWagAAiwkP/1xYRrP3p5trfFKOWWXw\nQcw+eLX5j/eaGLJE+l6XS3QPAzZcSGkZSRVKYDxHJC/1o/Fq7JeKL11Xaxci\nkUHWofQ8qt1fG88/tzViE7QoPbeSR0FcTOM6GwCnI1XjqsSPh1Wz7DRFZBIA\njP0BgbjR7InSePw26pF4ebwz9EG00C7xDDbV9RAQLJIrUasULLX36LdqyHM7\n0jOrkz9shSL3hDFZJWeAkwZgZlgTySw9ZAq8SrBcoA84g/BC+hTgaERK3dBs\n/M2+k6yW21qjcHqKZNGY2jQ5dTr93NJL8PNFxrHwtCUfMOn3X/OCryojDY2r\nrN3xGgHJ7LiRWwslmpvceWpake2xfCcGl4F0+EgV5QAf17kbGdq6oipiyt3K\nQVrkqAp5UKhkFGp8pD2UZfLahbuH2suzwFbeMufDrVk/5SBzRzlKN6Dp7S5x\nXwT84KrSv+3PuCkfLsz94UbA2ApgS8ZS6NLLzgn0d8dy3ix3D712gqGFqgmM\nJDtHBElGbNQrPICxVjrm9on4pt5bDBamuKPZXjuKjKVoyikRGF6TDgmk21q7\nqEpJk8JSLqFYtBdb4+oMCSJ+WQknFs9bIwa4lwoyybrdaSFlxZONndqHXVux\nqe5AP1UWUzB9SNNNUT1hl2czLDpH4or6USaZ4BLI6oc2U5XxP0lsQP1ZJmPL\nDKRW\r\n=nxlO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF2osuZDCc3aAeBfIepsCq3P3wAIiqyaAU53XSRv/aHxAiEAoc5G+AM5hNllPY0X1hFkgsbWS139vE1sWy0aW44c49E="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.e0b8c9d0.0_1591398322114_0.8011380156914476"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.51552859.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.51552859.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.39e6f71e2.0","@material/menu-surface":"=7.0.0-canary.39e6f71e2.0","@material/mwc-base":"0.16.0-canary.51552859.0","@material/mwc-list":"0.16.0-canary.51552859.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"be62282108625892e385a5b64edabb5c9949ca75","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.51552859.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ZtPxz1RKFsdBe9GoChXAR9inhwcjjVl6NxJ3rYqNWb1NqCwsoRTRT/3GBH7YmK4jLuZ1ihkYxIGz2slk0seg5w==","shasum":"e73f08b561ac74e01a4458a19ca1f286c711bf7f","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.51552859.0.tgz","fileCount":41,"unpackedSize":620532,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4CSFCRA9TVsSAnZWagAA5TsP+QBL7l3OMk+P4041oRP2\nEw8uc+Z509Hx19V3Tp59RjCTsypCjeerkGvpmFrI7zXYsK9lkDDI/CRiG88/\nsx6vD0oGRP4vwduLckWzX8luesBf9YONbJcK3cJT44bEPar8xv72Q5JQn6PW\nV20tqmhbOd+S7OB+69n1L3/QwyRZq0Q1eKfYTpv/NHoxnyjHDbElFCUAcQ6h\nKjI0kpN5DsgRDUsDzr4o8B3+1buvpzouKtjzrHAHTpZx8wUuvcap6wmVfGay\nC6dWdAlySiV2hyq16u/vQbJj5J8fBe/eFAmEBxm6qj1aRMv9FSiHNcQEVQ7K\n4uQo68SM64We50w24SNmVaJGtbVk5EUsXzljWjtuRHZxEGgi4ceCWEJF+thN\nbMHJDxcs7EvrwbZF6kimJTgWtlB6fsHVXhiG8JYcyYjj/tP6PFR86BHZEfsh\niOZcy3dymA7ibYFWVyndVwS3BUjf0l+Fk0Z4PnsHQ+9t68Y9puXcrQM6t4Uh\nQ1IWQMU/QDyFVXdO1s/yzboxxQAomqk2h0ok0JGuUopvSXWRheOex+bPUs9G\nCeeyRrmMC6rXT0o7dr2if0+dWF71bhAhiKjFmTT6WUCQnfG6HGUnFA9898u5\nkStmKaALsuQqxXww6SAJFpyvNDn/GfY+efL/Xv+NjQz7tU93hyEe+PBepfHW\nFDv7\r\n=GsFx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIAQU+LpcIZgcFn2oNG+WMTlHLAyatPjuspWbehDFq+gIgX9tHEK5bnV+KmR1KyueiPoDOUPDLA6/tCzuzetsuW18="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.51552859.0_1591747716886_0.013344344550405784"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.2e269285.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.2e269285.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.39e6f71e2.0","@material/menu-surface":"=7.0.0-canary.39e6f71e2.0","@material/mwc-base":"0.16.0-canary.2e269285.0","@material/mwc-list":"0.16.0-canary.2e269285.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"de64737d606dbb8ab6368d8fa30690e62fa24cb0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.2e269285.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-XYiOxPxtI38VxZa5Dtksp8PH2hpb5X3CfbHugYNP5+iOc6Z5qmAkKyB5Xl2yIFrWXJs1dJXBAkqAGrAuaReW4g==","shasum":"d2ce53094115c42fc6ad61ced97b4b63aaafa41a","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.2e269285.0.tgz","fileCount":41,"unpackedSize":620532,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4DkICRA9TVsSAnZWagAAYhwQAIBqVG4Gsif/TcipWl2r\nRLqxVOw2+NSDV649NSMJXc7salnOUrGTaN+8A79WSxCi/NvXyoRg6wwORYic\nZdowY32RA+xg6aYrom3o/uCkXO2HLHwAeO4j1WV2UEXsyejZH/64K4k4rqZP\nrM11Ysj3+aqGeJFvr//Vkqw4DQldrpizNzLmHJAo5bv25BLJurZFpz+BAPK+\nw9HghGPptHOzi+Slj1JXGLd+vD8kqa1WXO+Z5h3GLF+fGrs4EbIMhbJVmBVy\nabXRyKK/m6fbQGJcB9YaKlmPkSMjTg5EKocfzd7pB9FHu2wQ4v5pXDZUviM7\n7jnlPepR4GaozrXYjdAK1xvETD0MmRoatDBOf4e/c/rOreYyKKyGCLKsZL/Q\ngNGnqk71iU1ZKqe8y4cVmZfhSJidnyB7QJ3Nk0bwq/lKHA4SO9uJE/QA7CeX\nFsOTzRVSlNjlGQ4IopS9gwy4UF+Eez8gqMsymw6pieSiwdyB+BjvF2setqEt\nexRHTO6CsV7emBU3vuJsOi73DxHQA+KsjKke/22ee8ZfEj7jh2+y7kjkqOAW\nRurf5N3LOesaN2q1+U5ALPtXwfNyZVUR47PkzsuJGkmMrG594NIdmpL3gy70\nvpMIOfFXBPC9hRVaPNkopbHx+D1j28h2Ukt+WQrtU2Wkp6Yy5w2UWlxUMpWn\nfVrX\r\n=TSci\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC42qtFJ1Z538m4syBwUuZuC7MzWHnCmNB+rhUG83TMRwIhAKVU+sAcaPo2vvUE/hslYhHmkfVuTyFhnUI0YuUs3lF4"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.2e269285.0_1591752967761_0.33348254406314215"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.be138b01.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.be138b01.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.39e6f71e2.0","@material/menu-surface":"=7.0.0-canary.39e6f71e2.0","@material/mwc-base":"0.16.0-canary.be138b01.0","@material/mwc-list":"0.16.0-canary.be138b01.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"cd3bec5fb787616d9ec3c5e011ed8224add04ad2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.be138b01.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-xF3bRkXveST3q2WTIF3r1u6IoYxQuN6QNDkTncVEkDksVpPJFhxOXoUOntGqONCvLp/fcFN8fGF+eLCgLk/RuA==","shasum":"decae180b2a3e264441f572f4bb375439ba8319c","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.be138b01.0.tgz","fileCount":41,"unpackedSize":620532,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4UdfCRA9TVsSAnZWagAAI7cP/2vXBB569xz5IoLXsRRa\niV7eRJ8jvsexTjn56v0TA5v1zwiGngYO5p1Hy47htFeXV91x6Sq03OODgElp\nYXn2v+cMb+rhzw8/tSQdPeeG+OhZZ1DK4ocjHQa9eYT8Kdqu83l22ugMK8NV\nQqSdaBwZ5LNyYWk8I+7xpbDAW1XzmQIKBAx0n9s2K7MDP+VOe86J3UZbh7y8\neAnE2oqL4vhVpcMC1lv0WA5C3BRpuezDw5kkzJMY94b7Fn8oxUB4XwZ7KFaF\nxSjUiBPZKYvFErwi86GrTCC1Tl/06TieB1RX/p3ez1eHeuRPMNLzSkMuQAlX\nZj2ShxEvZy46MmygdP72xltB0YYOA/jG6sHSCWY0rwfTItXqCg1u3YHmXFdM\nl1BCMN9hUbna2nPgodXS0g6Af7jxnqHT318Ge0jNJGqzTiEphK9/ZF1bEnqk\nWrXI50KvBdYwzHvIF36J0ORmxUIvJK/JuSvWT7I1rW2gP2ooYN5vnIb0FoWq\nQesnaLvj17kJzZ06B2V92PgZAbpVS4dFOuz2slqE5krY4oXcLmRmkiyJssnx\nb6ly5UB3U2DR5nW1Qw/mNsl4gAD6OJwEoBlNQgHfdgdPKaduPDnYPbN+ERg7\nDSRtClibpD4LyvkkjwCTYYmKYmszwrrLjV+rCAeDJ8f2Ynt6OMgSPje9AfEu\nNtZ2\r\n=Yvp6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAWJ7mmNoYfKxBdjvYTSabqWmrsf/Pg+PdZtyH5Z2cZSAiBM/woM1kZIhQ1HdvfGcW/Z+qYM8ud+RajM0wI4aL7W6A=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.be138b01.0_1591822175470_0.12791527324415064"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.04bccf5a.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.04bccf5a.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.a6ac8f629.0","@material/menu-surface":"=7.0.0-canary.a6ac8f629.0","@material/mwc-base":"0.16.0-canary.04bccf5a.0","@material/mwc-list":"0.16.0-canary.04bccf5a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.04bccf5a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-VAu977XyZ110EOpZ0LHOA0w6LIa357mL7Sb/k/J4ZV3Ll5m6skp3TDVdCCN7dFsmRonICZrEkKb2pLH6xF4U7Q==","shasum":"b1357583e95ac2ba58a48445778f0278397f580b","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.04bccf5a.0.tgz","fileCount":41,"unpackedSize":620532,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6Bl2CRA9TVsSAnZWagAAevcP/0c+D1UbND0ZaIRu7EtF\nGlKK+swJYQjmhnJH84fO1/PALsT5TSfLkyX6LKI4uV/R9Ku6pA6/f76KQ9/o\nteYDnr2O9Nr6wioUNvQv25yTp4OC9x40KKKWGB0OnkARvwVWe4smzkOzUP7l\nPlmeBcWxDcTBru9JJY04SWRjhlqosKsjD75o5cLPKbSm9AumCkQQxWHsVV3w\nJyIynRkadLD9FYF8PuMc7LHIbT8veSWZuFIA7sTjqk3RD7AX+OQbbp+63sZq\nQEGDw3dCljJyStfWeoIuvnvK9gVUnCFO7ZshrdAa4UIFIe4rkpVx47/+Gqrk\nJ5V2eK3oVdTiDC6ApYrmsHyV9HAJf774WwlXGkq/Y+nWUITJOxrxoL0bl17d\nJUoTeMzYx52VYQbgYByBgS7bVzKX8Eja6qs8AcoHX8DLx0kAaaplPJTt2f5J\niNItdTxm6vtZv2DN/zTZKGNbIpufL4/eLQ6PFZt/hlmDkjKtOp5Ls1tmPq+8\n++b8oB8bTve1Va+nm9npvYm2lIHbtWA5LX9bkYbk0EbVV8ezmx596Su6K09b\nQ9XgVTCaOJDsm/rlsSPIhxQXKHhrdYDc5oi9rplnmNDrQ1XNCE1iE6l52TvP\n1h6zu1yJfZyFuFVwOFuaiXVtATwZyWRYoXcNhMtZXChxF4KAVh6rBv+20/uz\ngn3N\r\n=LKRH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCIHY0uKWjpnwbGsYmZcZqyim7FtaRPiWB6OcWcFcgGKwIhALhHphL1PtcQtWJEQdSaYbQnBNmF1cpXpNyTsl8OvLAY"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.04bccf5a.0_1592269174510_0.991317281305288"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b44dea36.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.b44dea36.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.a6ac8f629.0","@material/menu-surface":"=7.0.0-canary.a6ac8f629.0","@material/mwc-base":"0.16.0-canary.b44dea36.0","@material/mwc-list":"0.16.0-canary.b44dea36.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"c3acae783f88caaa2b0db088b82e7b98ef4ecd95","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.b44dea36.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Ik1BPaD+Ybw9AwB/g5KcLNIdnsEmboAN6JOBJPsObY/PnDUBrCZUgYvLKFc9nkBHIWtWEd8PKOFYf6zpb4kHqg==","shasum":"395737d1e6f4c7f0966fef8233485927407bf63c","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.b44dea36.0.tgz","fileCount":41,"unpackedSize":621618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TJrCRA9TVsSAnZWagAArTEQAIpP0LjtoUZ2SnzJWzsW\nXe/a2UQQzD7GxlsLzffLqyK15Mj+k0Ue+4/NXrp09fRQ9N4TKG/QqhNkIE38\ncz84Axosz/sW14VdTlR4uEwVobEwMK/2m51FZA+4yDyntPOMXKjvZDqYY48J\n4tIrCMeH2rhLUkcYH97goqrOpa18sONDXA9Tyf9UmRGBe9lc97V7dL6LBVDa\nh9Etv6Bdj270FkftgjilFYiRcI7bRzlRPUBHViqe9XwE2MxN1UoXMkOPkb5e\nv9Fv8YLQE6m9jsC/0vKD9rlEAxodm8Qh6W0d8Qoyiu5pt7Qa6MVejZ9cjsnX\nq5hU29UQdUOQhLBm/zpgdzEfCxPEP96cFDyaBzwcByaQTQCoxwYPf7C4vjZp\nMAHzEYJTAp7KoxWafByr9kFiAJ50MyD0FEm7C1Yj6WwwRtqHAVfkjPaaNWYQ\nCmawnrjR0tlsiMylwRZ2tVZUYBDKgEtaMwfYZSCBBIIJqMxht5KkHarJ+v94\nE1n3A4ZVozmVdeFoCHdJ4FQQfelGOxFeXqNcTRimSX9fXxSLNg6WaVLkM1U2\n29QB8FGBGrlO9rumLwfPdiNkRkznp60TOmdGdFbcroD+GG8K2iNgfcqJN3sr\nihqlpd3GTw5DwMzlrCwr+zYOcp8T+m10Sb7LD7PBXYcacOoX2lCCuiuso6c2\n+g0d\r\n=PJir\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDpITYm/yt/CRkkIgE5X9J/Pd3HtR/wHC8T47OsP8PM1AiAWzikJtbC+jZS/EsndHpVkhFmKUTnvqY2C58+MHWMUWA=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.b44dea36.0_1592341099444_0.8427800232185652"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e2577e87.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.e2577e87.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.a6ac8f629.0","@material/menu-surface":"=7.0.0-canary.a6ac8f629.0","@material/mwc-base":"0.16.0-canary.e2577e87.0","@material/mwc-list":"0.16.0-canary.e2577e87.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.e2577e87.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-IZepKDfYlSNTS/8Ksxbtx1jsIWwXUjEVoexCCPsop3rjndxvmr4Rpsexy5i7cNmcySuLcB2Y8vEXGIatcFyMGA==","shasum":"41619b87c8276656808faacf56fab765d2823535","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.e2577e87.0.tgz","fileCount":41,"unpackedSize":621618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TTzCRA9TVsSAnZWagAAtSEP/jpBHftod0N5jOkJwLdG\n6eaEs9UY4uPrbbGc+VSttRhX8RMBl7m2INMn9tj5TduowFNtRe/JMMdZEIh6\nHtVOUNAC+BcAlgg6B0hdBVFu2vWFA1M0IvePtUBQ8AsgqpLvUGWkGEHVUA0m\n7rp777Rgmzx3jiM6oIpz+NP3oI76obm9vWtDgq8KC2DQZpGdEr+11khEAXbp\nWV0Wqnohw9iQNXXrvsg2XOD/Nlf/kMIbthdNfnZ7gzxIKMrvtfm8X8nDZNwg\nSj+5leoLjWa4iL0FgMcLrSmWNCE1QJa2mTngBNbwUXs4lXpRF0H3J6Tuc2vi\ntsX9IEzY4KH01vKzZkfr2bfgP8y/UOZJesyAjEw5WHI7QLw7pl1Q5RahZlW2\ngW1Q7R30HnZjo5pAQHS5l3x3Z3+1uWpidzmhUdkpdCmkKGoP2Yz6wbfz3pCQ\nuQpE3ZvNjhAyvpdNKw5SED9vKfOrIgRso70cp3Py8y+R/zRq8+Bp76wtCyYZ\nvCsm8fD6K7Hekz9BG+oJZ3WzX1P1KAXgYT0wn2OKMzq9UIYfw1Yk5bU7rW2g\nBNSLdIxZeN9m2Q2ZAgjkPfDjY3q+WqiqENJG6p9dPqp+XBjQTz8cRu61tI4D\nkW33JHAFlwlLNYttLKcfOwurK/XDq/32V+zoQrKARYRK2VXqP/vdvlO3g9k3\nNohJ\r\n=+Qm2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZAzth3VAwsmHy5ob45DPQbIwtat0E5XUfb8c+izGEgQIhAO5aWsP2LMzjd2/EgFsHk6KSNNwdqlHWBRyYfgAiZ7+6"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.e2577e87.0_1592341746954_0.6996578267497331"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58b73343.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.58b73343.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.3aa33998e.0","@material/menu-surface":"=7.0.0-canary.3aa33998e.0","@material/mwc-base":"0.16.0-canary.58b73343.0","@material/mwc-list":"0.16.0-canary.58b73343.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=7.0.0-canary.3aa33998e.0"},"publishConfig":{"access":"public"},"gitHead":"ba9eb85b43f514dcacb8e7517e4b8728a3629bef","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.58b73343.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-oZ/b2XuzX3HK2W1v0hoQCTKSDUhbd8VPZRi7LYsKsLEjPH9TCHql+L6CfxXSCCjRhs1YjCql7/4OvUvpMQd6oQ==","shasum":"2d8da6b1a94d9dba15c9d99cf77bae1998f1c48f","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.58b73343.0.tgz","fileCount":41,"unpackedSize":621618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6Th2CRA9TVsSAnZWagAAC7YP/3h2he0DCO57h0fRzc3A\n4suTrwlrg2xb5NfSTUobYderum2LX9CqyEGaOY0dpTXcbpwJM6L9j/E79gO1\n/BD0CtJQu8FT5OsrxF//VShxqJqPj5epf7IO6m95rxSyXHvHClrLMLiyf7z+\n+IQXshAqXIkwg3MUC2s2/zmNsyc7pvtDAvBioa57MPyNkyWy+DYz55P0vhBn\nTa40qQNnFJqaJjEwP8hTcAhQwyaqI3veTIG/Lxyxpdj7+Y0rEBFTd+Mzm1fa\n3zRD5ETl3orMfJOXi6SazR01qdUgZj6uy/6c+YHVJusroUiYBAghDo1qMmag\n3n8UUvjLyaQWheGn/1MB2rnLYNChmY4xWB2hAaVCopFiqn1YMTlaq6rXCPyn\nydN3J2uB+Sk7vOxdWos71llnL2Gt41ZomXNIyzkRcvYdPCayld+C7U2Stgon\n0OZT7rW/LcUWYy8YvtQaN5VhFuamLy03OeDubXYcmZ6VBAXwZ+As/6GL3KT8\nWPYgUAGZLIZKoKB/kpF/DsEW3S4I5lNrnYPJfro9i1ijTWtXv7ukF06/ftdK\nW3f7j1QJw/3fS+NURAB+/2WSO/Q8P9NbRSW+WMgxS6hogNa+B8MC8Q17caH5\nS9hndYchW2SQ7IiwDmc4tWZ5DhLlIhKrBKiY9UW9HUFPGd8EsMRWqHqaU1UG\nAXuQ\r\n=zRGs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGArcxEfprnZIAiFaT/Kfn8n5UrW3TZ0mYbK42GlW1DHAiAwTcA0J7ptyytcIiA5gYvskcJwANF+702POKXyx1XEXg=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.58b73343.0_1592342646113_0.8546189672478102"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.f155c058.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.f155c058.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.f2a488e95.0","@material/menu-surface":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.f155c058.0","@material/mwc-list":"0.16.0-canary.f155c058.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"bfa2e71d76745185343aad4d0a9a2b6c3b134563","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.f155c058.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-xZ52aAuqKLVtBmTlDDRF6IqqoHc66rEvMFylpbeTjR/dPzEhS78tYkbCrMDG7q7tmqKenvjOxIrRLgiiurLCZQ==","shasum":"8e2fd943adbdf75a500bad7426c7e9d5a043718a","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.f155c058.0.tgz","fileCount":41,"unpackedSize":621618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe662RCRA9TVsSAnZWagAArTUP/0uwDyp4MtCJPPnMf7YO\nNZnMzCeP5ZOFXiQ33wqohE5H66/d1cCk9gRtS/tFPCg+WwdO1MZGMshok4ot\n9tHBl55351qarUHGMrTYSJv6D2VSvrKzClq6GZLMvkGQwjfvgWLibUxz9aid\nGRPG4klHROVWSMUJd5RstnZicjt/PEHDickooxYVjCBxTfZLngvpQhfGwnwY\n+wOmrHp6RCFORCwoHK7xd96IFlIxxl2q9LDJi4y9A9IDymneusIMhHCVWF0l\n6jopoSZkBdDgy+O+ebwfMyb8N2tRMAkJZ8hOrM4rrzrUAU9YMm3/MeNCkLnM\nB213M86Igh7nMRSU3i/l7q5hLtLzL5rpO1fPpFdiNzVkKZ81ZILD1MFTS2fe\niCNlrjjgaKE8UOCNPJG03CYlOzwkOGHpJ5Hl7TMuhj3/s6r7sFGA6Ncl3pHL\nKK2OgKR6mbI8nGS2Y5VwcMX/wJuKVUe2XSD7fI5yqUPxd1xUSmHgB3KNYw3V\nH/MiJCD5cXdc1MKcRylXVD8O18tDxYPQ7XEMDwRgVJG+jhWoe5HIZbOhw5kM\noE1QDwQGs67fgSqdDYvaWRAR81PGnsENE5VuI8j7icNUht5m5OzzUD7TR1g8\nbzhBC+K0T34CZuK/iatnCZvJQOqzSRpiKCpg4DOfyvcbAVkui0COJATICUb6\nnrXJ\r\n=Lcz9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTQpFRm9DOOPrSrcAc8yms6tXcjjqsJXOSnwdFPIO+cQIhANvzgV64cM5VvKDqEgOx9dAyjFJlcVrf+W6cEjJ8b18R"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.f155c058.0_1592503696904_0.1261182426879588"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.309779d2.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.309779d2.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.f2a488e95.0","@material/menu-surface":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.309779d2.0","@material/mwc-list":"0.16.0-canary.309779d2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"5227f0923971be3709c93d0a8ec0d85564fb31fb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.309779d2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-5iA7sBBd1HAnn1cx+EvxUx6WqZHFB2/i7Lzd/ONC09Nmb8h7AY6WTaKceDjb5kuTe8zs0ic4gkvF1wFFBPfZEQ==","shasum":"95a7cb3db03ffc14578a75d100df1a92910db498","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.309779d2.0.tgz","fileCount":41,"unpackedSize":623338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6//ICRA9TVsSAnZWagAA8dUQAIEf0vAf1VkWw/e2xvi1\noGiZ0fwbfHMGlCaFD8ln/S7R7ARC2NmZ1Oy8BMz7KBk2mkrJRtnQ4PnH1n2Y\nruOZvZF97LykFPtDrQadlrfsQedhKGEd33VKCh00RncfTA9bGZRp05hVO8wi\nsu6IQQ/tX9ZJj+KC8tkqKEkdVfj7z5dajm/9N/+FjDsXLKEOZVzaJBcmavBJ\n6S3mP18Fx8Q1BEDr8Q614HoImWYJZ3V8drUqxZPbj+Am32XDaTx9VljqWRJ7\nbL/slyncmDE666n17i37AXNvr7F1/7XzXKyoHQMVLL7B3vlHCIG1bROFXMEI\nxa7HojhkGbBM/FQ1k7OS8qcG8gMHNaV5Pvgjaljpx9Nhe+W4cVxULYL8Ukzn\nRrHq1vKObrOWd+BLONvm9xrU7y8zseniVfRrCa5a/wMX5pX2l8TMLtV0KIeW\n/OG2Mp/XktT7VnJ9i94r/8RrzkMNPanNDkngxd18v8+4Daxc5buZnlxw2x5s\njE8q8KdfunfFbXiqa36M6xSCBQTWxtgbtDH2TQen3ljDhdSfvr++haExZ/wA\nLyK0gW1q2hDHxWDHtvtg/S+643dy3TSoWKXgggTo2xaWM0LBhFW78w8NM3TG\nPuU3qJ+s8Ag8cG2p/9tWNTtXJEwLctHbgFxN031m4HAsInwq0eUZk6Cj2eAo\nSz3C\r\n=Y2yd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICz5Q8+061SCWcMvLZhL6W8jeGXe1XWyM0zA9ZbSUWWHAiAmKF/aCELbv07MeB5w2qBlxUrCm/DRq+tCTPbqpq1c7Q=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.309779d2.0_1592524743669_0.8765985516892536"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e7649968.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.e7649968.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.f2a488e95.0","@material/menu-surface":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.e7649968.0","@material/mwc-list":"0.16.0-canary.e7649968.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"33e44f7015ad267b659c9bf1d34799ab8d508993","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.e7649968.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-0l8yPPpnxaq5QtjnanLSMRrIQfIZx7Q9oIrvFZLMB/kxfiJxIGljNB6RrH5eS3bkpjPb0+eR4qlk+AS6UjcnsA==","shasum":"a88b3ab169da46ed19f57a5556c6e358ed35dd27","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.e7649968.0.tgz","fileCount":41,"unpackedSize":623338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7TD2CRA9TVsSAnZWagAAzxAP/R3SpSn0SU4mg8h50fUb\nYk5h1IzipLBEneVuQMc0ORcDizvOy6T62zODcjsUsoOV3/ZObzjrJiISiJBr\nniG6z0EeE6DE//Wn66iHxAVHh24aYvXym98JZZRbkdjvBOisga2XR0k73rO4\nmmwgtqiO0yZlHVU2N5hlZLuPwtMRhyN57sSWlc946F4Z3YE79O4ImsIwhrAE\n4GV94noERKcUI6P02yLhrHZjHq3n2xEpK7aOescv1wM/H3xOJVVpPVSv4C8W\nfqW8VGOCJShpGLgd9qyEu3BveHsJLnwFDv1sQc1+H8+LxmOsGRfNYNlcWZLv\nWJPyOAiWdtvQvNNdoG6vAoDSA5kIxtALQdFc+Z+S33aSDtINPCa8eC40RSPc\nyUFofiaaCue/IoCwHYIxUkLytQBdQhqMoANMBybPOdIqwFyZa55sdmT3ybQ0\npOAyd9OI+h7wXDaUrrXVeVeuY7YBkEfgbOPd6gmusPgkVba/FIN5NS7lQvB7\nIhd4FB7GJYyWfNGcgBmfGXJ2au5xpbY3BPNGkoNLcygrzi9YRMW0RrqSrk9v\np++KhxXNA/p+4+7psVScutCAiqAiyz5lYaB/dOHKDdeZn+Iendvwflod4ijM\n3uAuUIhoVzc0A8nZ8GfVzpH/gGe96I2kEQ6QudO9Lw5N/z/GvB8p0ejEmdfd\nd6W3\r\n=Syhi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgrURsqxGBXPBsPMitrkXPC4z5rGd983z4Sx1c9GqyrAIhAPoA2V7TPAk/BZx0cQFzCMwQgtcpJKC51pJVayxL8YAF"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.e7649968.0_1592602870037_0.09958112962677612"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.8e21c78b.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.8e21c78b.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.f2a488e95.0","@material/menu-surface":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.8e21c78b.0","@material/mwc-list":"0.16.0-canary.8e21c78b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"87567a000d0fe9c1fe6f2b37030908bdda7f3290","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.8e21c78b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-K0IKoGkWvX18ZTb+5Ic1qu7RCESHm6aqBe8jeSzjKd1QbVXyhBPn08lD8IuOa7d7a8cbqk2aOMmS9JAhbDqS5A==","shasum":"cba2270fbc576ffc0dbebadfef135e693809ae45","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.8e21c78b.0.tgz","fileCount":41,"unpackedSize":623338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8IoTCRA9TVsSAnZWagAAjjsP/3Pv48VTklCCX3yry5rb\n2v7RgSZ0Kje123gnC7blyj7yQyEdL08rmzfZswvMYydIptQ7+/YVRxUNQn6z\noi9TaqUAcLPdEZwwtvj9GRcUJD0yUKCxHhET+GldEC3s5jGm70R69jt6Q0lx\nKzr1FyvPrMI65KOQJblATvjysXni115sfAS6MqgDu6UTnIXqQKkNwCNvxvJ+\nrYZItNndO3Ni70BDoguUVWnCxR6TMQ00JJC4xivt/67gqrYi9z+2tq/y0erD\nng+5D9SfKQfM6+yhXE/ftEDKHpufw5A35Kwk1j6u6+WmP0+ZGPAkaCMIliG+\nJhml7fubQ/zGF4BCgSyteY/b5Dq7XRDGgk4ho6IrN9uqKN2vLHFc3ttLOizP\ntgHVWPwErBaeFZFCeRQwpO5jjM3WseJil8nl+x+smPEJkG1NVE5EWLWH6u8C\nPMqj+GtKj9XVL3audw4KkccA/9LtZT2MRd1DcA21vHC0i9LSLHBUnZxda5JJ\nUDw/7rnOyt+yYu6acsfT4uthtG+cfn6k+EemL28eG6XBtjslsLzghSw/Y8oD\nC4tzd7xTUtjTtyPLHGMSnbY7tAn6SyyTH9kYzCyvNN6Anqf0D6TeyxZ2BrHL\ncdJ0icPOHG0PSJ77cEQ/jB/BcdmzKQ9Xui05MK71lILXLtvkihP5P4ocZVNP\nAaHT\r\n=Yfml\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNoje3CHt2ZlOwcGjtA0jb/25u687k+uxjTBiXOhqBegIgY08ITEt7T+yNbYWIVjGR86zzQUga4tZJ0oqopYDNsqo="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.8e21c78b.0_1592822290743_0.08508901050557283"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.6db76faf.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.6db76faf.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.f2a488e95.0","@material/menu-surface":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.6db76faf.0","@material/mwc-list":"0.16.0-canary.6db76faf.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"6e23f797a12e3585f2e2fc7bf0311266b8908e40","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.6db76faf.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-aqL4W4IwTCAAKwjLVV/sqY1jt2nPR+jMaiw0HULb910C8uj+JDOwk9G6KRqlQJtqwQG5MylXpX59OlpwVrkXBQ==","shasum":"4b56538875ee1d8b7b690abf6d3820a979033f01","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.6db76faf.0.tgz","fileCount":41,"unpackedSize":623338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R7lCRA9TVsSAnZWagAArF4P/3L4YlotGWQMAf1oGeMH\n3m4Hj1jyuTbeXvWJ/uOexU8s3eUdmJ07b96kAUxm+0a6gFQOHcG9VEgv3T0D\nG29a3kF6pwVbxXGZ2eKJdZsHNrGvFJpXRwLLLx/5YTHw6za0QELUl30sp1cG\n0doaKoEFNTJsGOJthQ7f5H9GClyCKx+zOThP6ggfhzx2+T4z2ld7BK2vABUe\nX0bYvyJ0aUHsft65c7F2OH40G1KRArxz7Hdie1waNK4qlAw/tyPA2PXhkpre\nTZlqX0MzJjxoBlZyB/wHBqCVWe9RHdnp4NNQWqlOFSq1DMJz2201rAKg8YcV\ntyCjNGbu/sulmc9vzfTdj0tiLaj5pcRjMcDG90VVK3O/5h8iTMzvz62N3i1v\neOEgaQ+e64uoWq7uxSCBM48H7rfoUd+il2B/rreWXoWIGGK4poC/+QLLtgs7\nCz1pHv+dI8XM+IrWGD7QghMDhvUs011Qyr5HdswZu1JYgV53OXX2lD3VQfbR\n2wvq1q9kjG7j4gorDD8vq8PV8Dq7Td3+M37xd1vjq4qL2+mWzpKnEPUZxU6+\ngk4GcrIM12hDZzpViX9tLPLrjsV/xr7er1FG1HDmb2da5+zO53cDyY8M5JY6\nm1jXVKAzkelobGMt8LXX5En/1diFxicGbrQiGSgJN0H4Gg97bQxoz2GSCdgg\nFyX3\r\n=HdwW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICVXmNw9gG7Y54KiUD0+UKv9znZ0bpDLVzFnbXnwn9kOAiEAmuv14q9ssCJrpbBpUNQWzfa4JJsyiUPf3WDOg5tZAlM="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.6db76faf.0_1592860388807_0.7107969159544691"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c4dd9684.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.c4dd9684.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=7.0.0-canary.f2a488e95.0","@material/menu-surface":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.c4dd9684.0","@material/mwc-list":"0.16.0-canary.c4dd9684.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"4cd7dd845f6929aeb590a441e62cfb720106f05f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.c4dd9684.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-CJsPH+bnwQ4Za7kYtW+YsMY/hMRbFlsDi5Nj+Z4jvUsi5z0JaNmtz3u8JnBbB82zGUImv35VPMDe4j7FCe/TXA==","shasum":"16e5de3dd0202676e79185a4b77c94631a4d8c4f","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.c4dd9684.0.tgz","fileCount":41,"unpackedSize":623338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hygCRA9TVsSAnZWagAApMAQAKAy4xkPtzUOIVl9hy1p\n8ioGF7+4XzFwhUtWQOPJu7lrhFJV7TQKz0t4AfemIJ9Z9yEVwFlt1fdL0W7O\nTDWuh17CoZJITewRPqxk/+UEGzIb7zs1n8wNHpmWi77349ovTWWhJPUNPtO2\nQjTvdYxyyWT3B3yHcWxNb/Ll7HeNc33hk0Tf0j68CLiTpKGkC5PLmu1Dedcb\ni0AA6WydvGExuEVh1Q9vuMy5utXdRW0P2Hvk0pgLgB2IbmWHr/8jzWEub5Tl\no3lTXYpd/n8lYbzejdl66iVGtXbH2rTDGc6HKoX8ann3Vn6Xdhalns8lQA7j\n1JAdkJkI75WlQeQKzMUk1Mg9rYX8z+AM7TBCuGqBLPNy/oTrFT1n5z3I7izH\n7NGd2q/km0fVQra+9YUyzB9r8OAQBxJCMZA6jNn6NpQQXurUlzUS+cqvrmuS\nlNPPrBXA0NWNeKkeKfxfxLUVwJS/oDDTgYw+HVFC7GzIShLZ2rvyHVoEc3rp\nfumWGBwNiXGfKjUXKZ7tHuy6Y62sion3mrj/5UM2V+SfpAvXo622BM/A/HDC\nMQwEvEwA8zxHZ3TTj6W00E0qTw+afS/Bf18gXCIt3UhS9JGLT2WLKcEtffIN\nrUDjRNcD/uEhnuGqLBhD9iSL84/jmXF1CD3TGYdvhU1XpDO2XpF1df7tsMGi\n3VFn\r\n=+3T+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIANinAL2aOzgmFxTPFDIYynkUgOFIhCGPDeKsrXku/daAiBRrZXtqNHwgfpEtryZSIaj3f5Av1PeXlAkU5YZ3+J/dA=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.c4dd9684.0_1592925344547_0.8439119022620436"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b3e53981.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.b3e53981.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.15e81fe98.0","@material/menu-surface":"=8.0.0-canary.15e81fe98.0","@material/mwc-base":"0.16.0-canary.b3e53981.0","@material/mwc-list":"0.16.0-canary.b3e53981.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.15e81fe98.0"},"publishConfig":{"access":"public"},"gitHead":"8d83f2faa9e72fded29e88f843dec080efd318b5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.b3e53981.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-jdXDOVsgnpqjdN/gafQrMJJnqtsvmJyRhKBdyvwbRHZd+PEi79n50JTtJ7BcYX6OCFSuoKK/21h4FDl0mbIPpA==","shasum":"3df018d82e55f71d4187b899692e9cf5a5e9cac0","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.b3e53981.0.tgz","fileCount":41,"unpackedSize":623338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8qDQCRA9TVsSAnZWagAAOIkP/R/829aL4HXdRO6jw8/S\nFp/IC/13HDZ7yVTvuw4q6ftsuLmVIq0MoA2DQUg4iKjyTI71FJmlxE4foA1J\nC25HiauxQJx9VK+Vs7y1v2+Yfi5iITgxPEvcXSakWr844K3ehFHBRYwhVZqC\nNRMl9chzFqsULUymRBRD5cBuTd7rdz8jytCQX3Ge4AJNV364qYL+s2/EuQ7m\nB4Zis/yBqzfSCFmLJY3mMNsY61F6GtKUOUmA9BWE1HbJ7P/m5gOvpqOXmHIV\nEy35w05BTeJgOVgRpRIOXQ+tKnPgU5SAOQqlJ+hkb9RqurJ3jBMyTl0mwnnc\n6scEwT8JEULAzkWmL2fWjcu1TF/36BPQ8YvpjDJweMxN44rOlfwZqHkeVCrX\n3x5JY8cxWkGxYlC2QSJ4VaEJMuSFn95iIn0eLhsl9C2XluHz/lpzHPB5Kh5v\nJfF9SiEXWhdtec8RpbUb8AThZRY7pV/P2bpv4yy0NE6Hl+Ot+S6zfvRbtuhV\n2QV5CRH9S4zAsK9A/S79Kz73vuswlA4TkOZLozpief4M1Acrb9Am1hiQtkWI\nD38axT2w+vJolXtLtVUguNyagcZ5ovOjSuGudKDxmyej5OCuiyam+MyD8qEM\nT+gjw+NwnrAVjru7yCdJ7KVKfuAI6+iAl9sOSxp9zhUq+m07X5BVTF2xEqCE\n0svo\r\n=gb8G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDu8LBEsVtXLSH1Iv45fesKSNw1HFhJV4imOZSa3jVPfQIgbV2GRaAj1UJ0hnvpaTPPy5/7eQStpz1nNeUlMNy4n3o="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.b3e53981.0_1592959183792_0.7355414147503985"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b9468f77.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.b9468f77.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.599b8c319.0","@material/menu-surface":"=8.0.0-canary.599b8c319.0","@material/mwc-base":"0.16.0-canary.b9468f77.0","@material/mwc-list":"0.16.0-canary.b9468f77.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.599b8c319.0"},"publishConfig":{"access":"public"},"gitHead":"89bea892912be98e07d72fec0e142b11d1874487","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.b9468f77.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-MF7HuMyoprWsrGDbrzOsu6pHvje8Y8xrhu2bwsJJ4t19hLA5D3Aba1Rg5O/nNbeNSAoHBC5WlcYwGN0IIycFMA==","shasum":"23f4821979e0b2f27abd333076fc9dff3ff2db4d","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.b9468f77.0.tgz","fileCount":41,"unpackedSize":623338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe88u+CRA9TVsSAnZWagAAnQMP/iNSMPzKmCnX42k4PjB/\n+CmmdFLYH3Y3kI33ebw3reML4nVYRC0Sz0EPtNW7DDjsgASrAx14ok1Hno/p\n1ajvpqTCGqh2orMCu4oxvR2MQ92KoavdLM6o4U0awXBFPyV4qGkeO4E2JlZj\nigdnvHWEdRUd99mQBNUHH8MMz3BI9d3H63+RNASdK1hYqsbx2s50wSkIhKHN\nmgJARIhhdZvB+HU2gMPiWFCHxLi+Oe+BgJzH3Nsn7ZmMC/OFaV9VIQXqzbYQ\nJOS9u9RjW+wE6axsyYQYqcfnk8Gq1d00FwhpAKhjt3+Tf0CusfgNMCEcBK3/\na4AA5B9YAlrr5ShYxfgFi0OtglnSm2zPYbczSGbgPqiFEra0gWzt+vbFwEvb\nI4oilSggRi605hIU6khEoWj07h6cXWQkYvS8dgGHudIj1oV0CF6xp7diEzXY\nRw4Z4OPY2ZRsKbwmjkx8WFgf6894GPD+vOcx7Rj6fMZcZJ148YR5lyvE5NHT\nJ4tP8LiB4HC8ECZuhx0QRlgTXvE9jOAQxm51V8upnKgS2mPYbg9ennJQ5/Nd\nloXjPLhmoG87wrojv4gmmPETNv+4MeF6PGUPstv7n5/+EP6EKN/sOljlHGMr\n+fxCb7nc4/vv3858VduJn+X0U9xjED71543+7YstYcHYG7rU5vEgDVodtoyI\nAZfG\r\n=if9P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICJSEsv+3BPJPHZc6B3r/zWaQB0f0ilse94xoLQe5UKxAiEAs9Pw//3gXKI6wumjQXSGIU5Vl/4ockKm5/bD1vxoZbw="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.b9468f77.0_1593035704422_0.8555088473812942"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.eb790e49.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.eb790e49.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.599b8c319.0","@material/menu-surface":"=8.0.0-canary.599b8c319.0","@material/mwc-base":"0.16.0-canary.eb790e49.0","@material/mwc-list":"0.16.0-canary.eb790e49.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.599b8c319.0"},"publishConfig":{"access":"public"},"gitHead":"722b9fe701d60a27c2554032e63a2a7579ed4306","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.eb790e49.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-BON2nWngQsR5DbFCrwYBc59nQz9ejah8GhjnCkdXtIfVE78YPOD635XFGfyk7zmr9BTSjcEHsfdlGYxd9piHZA==","shasum":"2d5d3480b5cb5414c4001f7f681fe0ddd7b7faab","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.eb790e49.0.tgz","fileCount":41,"unpackedSize":623338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RTZCRA9TVsSAnZWagAA6BsP/jCgOHxLyb7iEArvXd+J\nTBaGOnVPEFv6UppJd0VZutNS0PXu6X6GeTxmBTUmRsPOyZ89yhzG3nrwrvIT\njtw10DnnIO9bz4sYiNWS0TfA2MI98AweOZ8xoCRakYi7A9ug7Bqke3ZJ546h\nwAoH1PJw4pv19kjgvmlXdxU9jBN3ZWvRUAIcIeEUQN5WEAt0pVCwSwXVNkKh\nAETEE2j+L52FFCNt3C2oKoNfPlaJCUtUyqhdG4EJkDLjG21CjXkKkvwtvgua\nAWpqC/HjwuBHKcriscpYvouyI+JBajsUfLQPNA2F1IYhsGN8dKFDqycAxCMQ\n2UCp+cNVDd+U1dKDk00GWsvBmd3OVM3qp5tt5VDD5F04pKwf+A2MkQJKy1kb\nWYK0LQzXfMlwS0SskZx9ZgK8x2a32QuBDDL66bpFA+UFwnY14tXHGU+pMRiU\nqukj0/pGx/f3LUYfll5i3Vy0vS503MnDPuxQajOKtlva/HGTuoit6Y7+ZvRE\npiEfv8P4CFlUFmpCKig6iPbI5YO5h9Xtp5aVMdY/I5Yl1RQBdC2IZqlKiDkL\nzllqlbYptmCynsChRqtL46apsGVv8/TuB67+IbA4/kuHTBk0lI5HBOtMrIrO\nXBP8iiUjLcinzx9izHpq7xutZGPMmM8JmsyfniaAaAQQ4dAnR+BcelEyolRU\nhUsO\r\n=9Y4i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID9cpXJiSu+BbKQ2Tp7VZs4afbzW9Vef3t3zJ/QCEyJdAiBnFFEcqhtUfWVITCM1m8/qKi2SRUjopLVA6pi4kuVPxQ=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.eb790e49.0_1593119960701_0.8904945483747231"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.9aa1a5c5.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.9aa1a5c5.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.38197b443.0","@material/menu-surface":"=8.0.0-canary.38197b443.0","@material/mwc-base":"0.16.0-canary.9aa1a5c5.0","@material/mwc-list":"0.16.0-canary.9aa1a5c5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.38197b443.0"},"publishConfig":{"access":"public"},"gitHead":"04b200e2b2832855ef5eca7e2000672e53739c05","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.9aa1a5c5.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-I6sJKMMnI+U3r8EVdDbrGU346lhyD0WC/zNDUXS+Y9wWH4iWwaj/EOHwNw2ayoSY96iAc6jEWEtkPHL4OApPKw==","shasum":"55a38c15e3b03b4406037bf95d3c3705168f7b2d","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.9aa1a5c5.0.tgz","fileCount":41,"unpackedSize":623338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9irnCRA9TVsSAnZWagAAtC4P/0rmCwqpznoGwwjp80ZI\n7T+ny72EC52PRQ4o0YkJ41zD3b8Zr9KyZwy743yALegnBpxYY9S1KN8KS3t8\nUOQhKfYMXFsGxWsZK26pKhAasRd4JaT0MDQJP/x6w7R5T/t5gddKxi8jHYlf\nFSRAEhjddr2YWqMEHkR5k11tdjkvZapupFYQLzdTO25TAONTamMIhGfjtWVK\nBRK8d3slMf2C4NB27efdeKWPtLhzdWyfHnSt4VcTGzXkiQ1sEW/zfXHvNrt6\nbC6G93Qd/l422ODgbb3/7qPbrgAa5YjV7jqfthDwFWjOcs0pKpsMIHZwNnEz\nR259r4/91EDj2Kco5d0Nd7bRGB25cw4qQzE+WClVU13RXDYO/jP04Rph1+1O\nsGxJedIeRQY5aKMJQl7Yj3+wAwyrckxdsWoxu63p1gV2mc3a3re8nrwFSuGv\nF19V60VYYytFf8ISyn7dQVQaujVB3mBKAwVNCcxIP1b5wFpD/1p1dd0CThKy\nqNezez+6ZaTuhwWoNxCg2dFuc6ataGaR5ElCs0xCeN6pFQ/ue/R7BEKTLjrA\nLmcq6r+aTpeQtfiGrEqWnI7xt9irVEcmmM9J07b8H2DTDPoIW4gQVT5uzpmS\n2CRU3QPIl3BVmbQxhH22Zg8sYYyU9R9QR3dH6WcWyiB8tOLg1YAMpQoyS/A3\n/8fT\r\n=W+uR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA/acf5DF7mQ73mDaxv8lYrKwvqzJOjLw0lT3VmDjFZEAiBbxfNwFibuwVzz07OJCdKQq0PSGLAuRQre5hCMY+hXmg=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.9aa1a5c5.0_1593191143109_0.34781369406187124"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d36e9861.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.d36e9861.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.38197b443.0","@material/menu-surface":"=8.0.0-canary.38197b443.0","@material/mwc-base":"0.16.0-canary.d36e9861.0","@material/mwc-list":"0.16.0-canary.d36e9861.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.38197b443.0"},"publishConfig":{"access":"public"},"gitHead":"06dd7e826645eff53f5923422d6024010828a4b8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.d36e9861.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-e4CzgqjFmoaCHPHa2oJU+DafZTsvkCRwLxfv7t0O9ICKNBEW741amYs2mC6y637UbL4IuDatthGkTmW4znReDA==","shasum":"43ad99d6dca7fe4e73e7f933100aadd7854a09b1","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.d36e9861.0.tgz","fileCount":41,"unpackedSize":623338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jIxCRA9TVsSAnZWagAAw9kQAJo48IsNddzdyHX3Msed\no7bZ83vv5Kg8Guz8F7b9//3utKLpVN/5qUDj+xJp1m1LymXXVAOj1/nKc/wM\nNXZgd1/z+4wlN8r3EiSVdVIOVtRpnE1NpQgcMFYFvjGIDvjJNUDVUHXml4Vc\n3Y04sBV/xN7Za++QxA7HXfgab4ufZYPGHRGPv+2ZVlU2+Ccy56LUq6TGdlrG\nljTlVcE3+CTMJbeyd45N0a4mMWSujdnl7cUdxNs8V/I6QGpECr8pACizJ8Ig\nIBuiRdfmboKb2CD5vfoO1tQ/Fl5PY7R6Pd1QihmAo3Bca7pAuyKDDRGJSFwL\nG0SfaMCbOHX3lM0BmNbVemdyBI4Rh5eZrSrDtWImfd0eDwwC8eibz7Wnk3tx\n3fidZqw+FPHv5YP9Uts3ldixlKOnQyyLt9RAmky3Ai7zSjWZudraSNNgCqmB\niwPMYRklApUg7Hd1AwgfUPI3KsHQ8Uz3n166qf5VBIICDETq9/2eH+/h1eyy\nBcuL5eAEmQktt5CJKECR3qHdi3RQkoCw95EpzNs5Ay27GncmdNKEi4IpEvUB\nKPKx65CuVfUK1rT48M/lHocyQKSBDqDk223ZlPzju012Ywr5NrojI4fSyks/\nKDH1/c110YgP/DUEtLBunWsGoHEZmp4gL/kwBY8PzyMrEb68KlQ4WrUdqjyK\nopOw\r\n=86hE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGI+8tCCs9Xd/+p4LCtfbZmqnxOuR9vCE3Uhs8aH42RXAiAEmEYnJLpFw/0nkKAgJFar4EUMgc8uS7Zeljq40XjAYQ=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.d36e9861.0_1593193009262_0.12309957889861045"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.155c2f85.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.155c2f85.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.df7154fb3.0","@material/menu-surface":"=8.0.0-canary.df7154fb3.0","@material/mwc-base":"0.16.0-canary.155c2f85.0","@material/mwc-list":"0.16.0-canary.155c2f85.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.df7154fb3.0"},"publishConfig":{"access":"public"},"gitHead":"28a52966d069b05ddf3f845738ff3207532f05b7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.155c2f85.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Osr48kl0+C8W4YvjuW4oMleDsnuaAw+4bPx9ZJl6hm03jnYkgiX+2k1Y4SSeFgVo+uWDaFi1frde6+0X9V8/TA==","shasum":"2f05d90f23704991a9804f5b7ff2ec6820be650c","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.155c2f85.0.tgz","fileCount":41,"unpackedSize":623338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oUdCRA9TVsSAnZWagAA1asP/2wqxkUc/Xk7XhRaWtVN\n/V8fSKR6g+7vvvM/0zRzz/7o7geSlTgDKBcEfB6TZ+Px+MmewG410u9MvuZJ\nHPJ5nhb1H0hr1Rz3yklBjZs4cSYjqK9CmOZZUDudHiF3o2X/QLPDcQOgipnM\nvWzWwhpDVD9Cl1o0glwnR37C6CHf4rYJaYFE4BbYaIA714CtOAr2Thze6gRr\nRtwoeyq0Nhk7IGh4lpLHmuT1tebBSQoYGsy5+bywmO/4HXkIfD8Ewd+3/5HD\nEa/ggkAKuROqcUOM5r5FtDq1DtXabNUaRAAFHJc15cPzG+P3IJZZMCd5tkKW\nlQmuNVZ/2cPZjnDy0HCC7EQi7g6JuhdSnmUzfwL4/uMDq/kxCB16HRgBriSl\nqBqBw1qGu6pz+jPOlLU6KImG40xxptCqtqDSQAmcVE2aOb2dzcfDdVit0zuF\nIfg/8+fkpnyHk4QkfiC6TqhpwuM9KpdyWy3Aoi05LJHcDGdKKhNwvB3wR4jW\nGaMPNZ1Hi3R9qytyEoDvKUnSMq8cMcBpgHtUYTZ3O/8zfqjPlL/LixVzWK5S\nm9cPSpBnWx1Gjxcteht2JN+cqp7qvWL7hyefpy/r9Z12J2x8oBwgOw1mlfMp\n1A5w9A3XRt0ja/W0DgG5uFAXERkAWDaSlwEWQBRu//2+dxOAEegGZlLImyxx\nVjEy\r\n=X4sK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZv10PsHL4l5TpO2MQzK/oOdC4PY/o1oss1hUMTaSMLAIgZsle2+rfTvdzlVdqONV9qz1X1Qfzpqx5cMgHCNcusDI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.155c2f85.0_1593214237025_0.7979913815143556"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.340c9c40.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.340c9c40.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.df7154fb3.0","@material/menu-surface":"=8.0.0-canary.df7154fb3.0","@material/mwc-base":"0.16.0-canary.340c9c40.0","@material/mwc-list":"0.16.0-canary.340c9c40.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.df7154fb3.0"},"publishConfig":{"access":"public"},"gitHead":"b65b8e518436cb4bcd2fd8c59ae2898f2715462e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.340c9c40.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-h8+uSUhJZj2LQiXHjhqNJanFpLtmH8dpJcdjWNQe1oueOJMK2uJaQ80d81EIUEJWkcnFmagdN1jiBl2QotSQfg==","shasum":"c96e8304134ad1e55a9d53ea14c4f5b6cbe71f64","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.340c9c40.0.tgz","fileCount":41,"unpackedSize":623338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9ocDCRA9TVsSAnZWagAAmncQAJr47TC1Ueqjq+bD7E85\nGBOO6BdwVK9EJJful6Ho5+5LML9ApW028SZg11XRrrUsma8H8gAMGhC2BORe\n7eBkTBOYEWk1nMCIoWonoltvNKohQmfgaH5+LGAWvNKZY97uJI0ZnfmpaTtG\n6cT5xADRLbRycRDjBaHNfJWqi5wnsNpIBAjSAEs0L4LG692pXXDJ4TYFYs8Z\nZWby4TuagU/ysVscBMdZ74WhmaEu925mXBScQNPGdjRSufhM5V3Lb1So0Yta\nBTLtt4hmIU9E0fuoHYz9aRU+e0nu8OfIA3dhnMyqmDabdaaMne2BFh6ObvFl\ngDpCrwNQkAXhdhmypnqN0wvMrQeRNhxrwQz89eWlSsArCFIzOy8LyVWQhRLn\n7r60Xp0GqELrIOIt6rHmyIbqOBkjkl3TSPmltbYJMNIvZNyYb0l2XmsaIuIM\n22Gu7KInXMQ3ni1sw7tjHEmLjKmVuEgAYztqihnaAxWTohcOC1AGJMn4VRvm\nN9XHDwz0bI03+X+QO4xAUn7eJJ5X4mZ7sfkgddVO2qHojE+g6DPKuEXVAXco\nrDqxjZBLmmMYzGnuAhIuAwuh8cAix4t1YBQsIYEaoHUpleJvBxCoDvLsYdLx\nEJOK5O/daIMQgKP7rgIiQcPayeJeej24FpKfhGNRyacLlgbXPMiDM2D8Anz0\n17Ab\r\n=X8Ae\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGWCjqj1BVgE3DjmL1qLZr4FlxEOiuJCu6UVIjSj5pZqAiAoMbgxHtUO2i1ICzTePJDuiwTDEIdrlM71HyAv4QsYUQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.340c9c40.0_1593214722956_0.5117572982067444"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.a3384d2d.0":{"name":"@material/mwc-menu","version":"0.16.0-canary.a3384d2d.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.c678a9d34.0","@material/menu-surface":"=8.0.0-canary.c678a9d34.0","@material/mwc-base":"0.16.0-canary.a3384d2d.0","@material/mwc-list":"0.16.0-canary.a3384d2d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"e09d50d940709441416a3ec78b0600a867285980","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.16.0-canary.a3384d2d.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-rpFyFIimoh7QNah4OMcMZzA7GgAOTlC+x2oBzMh/862+LCQe4MA+VcHMXP4gwFR2BMB7EBz+INQEx/6l5EHZZg==","shasum":"4418ffab1d2c41350addbf529b081d65da270ac7","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.0-canary.a3384d2d.0.tgz","fileCount":41,"unpackedSize":623338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6gGCRA9TVsSAnZWagAAXD8P/1wr1O3cFkpXdQfCgxyU\nH917hilejk1lIOB8GCC8VxSD0tZ0pmfwLTysHeuQ10IUMeBvCel8owl6DFrT\nFH9MEb/cK8L57FBVILJEHbeijb2S2vW8YTe+GIki2gWdSH/o2A3VDHJ3ZIne\ndjVYn1fsnVZ7cRgRyBn8GlssmzYnGVW2MDHon5Z2BLhvveeXVQSReaOiZfQ9\nvYyAAu97N6sJCMqh8KZLgHbDCo7DExrwdsjTwURvZY2VCJ5/U6vBjWDJLFJc\nqqW0u88T1SxV0polYZCdgliouXNdDiNPUWTeryvcrrfaSl1lVvXcJY3J8uxA\nnkA2gV/K3IqzcLXwshmeYjD6vRq/SQYN1xQ24NzQMJ/npmcNSCcnYwV5K6ER\nzMKdy6G36Ukvrxd7zGwKOPnPfZVYfxYSLXIfaGyfSlAI4c/MyR8/GCGJiCWG\nwC7BsDjGx6nNbnHoVBT22S2IUOXDNrdaVYrKNdhidk7CVT8JjuuoRpvTpl/g\nYWCSf/t8a35riIe2+OOmH6AzcTLBHQJAP73Hwh/0KoVylXDjGJ3q7ROEXnlk\nCGk5Lwybpf1byUSwAV1Gv6FUQNJ1haKOksHPTd90kgZwXdGYXALfyoEd446j\nKjtAwLDt9zwPYxGMXdy2xnakVBeF1RKUWUealxtXViUcxOW8x/b/2licM7Z6\nmkGR\r\n=VZm/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNxlRD2AixHs1bIHBgt5hV/z48ek2k26jH0/LvYGnkxAIhAN8wRu5/ohr9LuDG3Sn2VFxHZ9RWyQkZ2zCOjtEK6C/J"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.0-canary.a3384d2d.0_1593550854021_0.859924822114386"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0-canary.6d056c96.0":{"name":"@material/mwc-menu","version":"0.17.0-canary.6d056c96.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.c678a9d34.0","@material/menu-surface":"=8.0.0-canary.c678a9d34.0","@material/mwc-base":"0.17.0-canary.6d056c96.0","@material/mwc-list":"0.17.0-canary.6d056c96.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"a0abcad0ecc43697e7c489d2c4ddebb257cae5e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.17.0-canary.6d056c96.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-l2h2KrTwj9OsFzctQV8dsu5cS1zqF42q0zTE/KWGdSq0ZzJcTaaSWVxUmYC9F2V3z8jVPphOjCpY2+FyzXhQ9g==","shasum":"c29dc0585e42e4ada5f9c802aaeab0b49b24934f","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.17.0-canary.6d056c96.0.tgz","fileCount":41,"unpackedSize":623338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6o2CRA9TVsSAnZWagAA2v0P/0lUVDb7RbbOgAm+eotu\nVmVSTsSX8CZ4F5mahE9RgDdF9UMljN8WJIvAw5ihWA1bfnxODs/rAxr2/KIM\nrOiNgXXz4exnKuYo1DWjMNNTCK7cXlcNTLF1ypE5o3qwI16qGZHFQHy7CuON\nD+oTEFkf/dVbWM6NpdySYINNGd3d9rdG0rL5CcQdG4R9NJjLsLg48eJIvE1Y\nzA6Q1uVRp1mqPxpDGwSd9layI1gGBQ/VIJr0MEFCIbSlRWCJv4siQ9vWjbIG\nIEIUj7/vqqKjA9aI4o6KLUHhcF8HSrL0qGuHiRI+/QWSx7AOB30JJlcLMzhk\n0MfJutOskUsbavLyeA/3Z11ZJJJzRvStBMOAapLe4iHgRj/fAl/COtJijlxb\n/SMVuSJLo9ySd0en2iN2QriL4IQd1BiNB/H9fD8/g4mWLSOybTY0/qjlLR/q\nFIKH12sRh18XyNoeW3b6xBMl0q3uHN+maKqkp7/mECV5EqZL4RvXcBpGw/uO\nmwCC8d3CfPCZ1gi9BTQy+KDz47E1YZ3ELo+1VZ7SUOSHSDxy3TTu90sLIjzG\nvqTnsH4CZYn36QaptpABF6xcqX6/RuTzN3t8nCF2sw9/ebBJXOwCeDbKqAXQ\nTehZsoHC+qiarlwpnyxKVZBd0YHZpNlnHi1LWk+jRbmN2do/c6dALGTPlhYS\nSTtp\r\n=74bG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDf3gTtuAz1/KSbavB/p3WRlf0ecJZZI+j07xKMIGKeGQIhAOk8dkp+MQTf5au3OGuhho1T/9W2Jq43OQP1KgPG2dEf"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.17.0-canary.6d056c96.0_1593551413808_0.2011553548898506"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.1":{"name":"@material/mwc-menu","version":"0.16.1","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.c678a9d34.0","@material/menu-surface":"=8.0.0-canary.c678a9d34.0","@material/mwc-base":"^0.16.1","@material/mwc-list":"^0.16.1","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"3b47995b0b098b9e7dfcc7b735eb23e892cbffcd","_id":"@material/mwc-menu@0.16.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-6ze78ZcIMyVce4pnhxPh4KqqBLl3jtrNuGxgLJCD19nPU6TOOHWiZ+ckN/qbbABxnTqdga7MJvWwPxALHTJvRQ==","shasum":"5a5900a38fbb43c513fde40629b6be9939cdead5","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.16.1.tgz","fileCount":41,"unpackedSize":623286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6tcCRA9TVsSAnZWagAA59EP/1tlzE+xdEGmOEj0czPr\n7JvF8unYam0fwi242DvwnU4Nqt+8GOgDHqDqMan9o5XPeO6IUrnpGdy7uuIZ\nrnchgG77ewrsqb+hTQ4rKsX3SosYvwp9Vaz0osw698tBwhXzv5+GPK+pR2bt\npd20xOhDx03uSQqxGhNIsGsAuYhc04DpEKr3CI6W+yOPeKRiwwOwK5cwRGwP\n9PLAcn/JCcuUIkPRFgVUXAVJys0upuMRREwENnMWlHyYBfJuIyLw+OIFteN2\npLJ1gC5iN6xBdo6jik4GA1e2ZtyjnEx4sw+I8sV/DeqkBFWm0FHPvERRXa3B\nLdqWidr+h5BfCwVdcRwQ3xcRyhJunvMP4tsujCLl3iOfVxpK3CqxLQ8Xk2Zs\nGIp3wGzV7gGWEGoUy3qbSbU6Ifgv6V+8lgj7svtf70A8j5+PT1GZrrVmSx8I\ntNoDuLptEtiz2dWGmTanqKsOyaO+JEMKpXqgtyXlxIRsTAFqtRtPuw8dpqB+\n1fmWrASiaWmUuRZTtVf6Ka579RvEsqUP9H7wEtITPmi1g78OaIOhk07j6eUo\nUdWKBdELXYRlVRudg7nbedRmZA5nrO1scjTpeZhreb+G70FeuJBeiOw9OmBm\n8Wcy9taM0+OjKA8Gb/9pb6JGrLhiv4G+Ctbqil9PyVIiKEbKhaWJ3B4n/T/u\npA3x\r\n=3fZx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBoQJQ7NA1Tkn31cHx5dL+pN/0VAG/w0RWxv4CFRTJZiAiBRJBQfVOS64KtgDQwYGv81DnMYrC4XFLAPEK34hucWXg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.16.1_1593551708363_0.8581680465866237"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0-canary.f7e37607.0":{"name":"@material/mwc-menu","version":"0.17.0-canary.f7e37607.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.c678a9d34.0","@material/menu-surface":"=8.0.0-canary.c678a9d34.0","@material/mwc-base":"0.17.0-canary.f7e37607.0","@material/mwc-list":"0.17.0-canary.f7e37607.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"898d9ba1603fc85a0dd4f96b0dca134bf20f6b37","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.17.0-canary.f7e37607.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-sKt+9Y76Znuw6S6jINcsYVrmyHgVIGr/711x0W0ak7GF/rjqTRIHe1y7CyRlrNn+LHIQfKmax2tK7gwqhDCtjg==","shasum":"6273ec3fe0619073f7c3f19943e7d54a67d6d8e9","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.17.0-canary.f7e37607.0.tgz","fileCount":41,"unpackedSize":623338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7JECRA9TVsSAnZWagAAbWQP+gP6b/W8efJn/fnSb08U\nWT4r871kEND1qteY9uLqlU9wScnuk+CuMlrRq05SPeLta81SrYZU1LRMRKc6\niDGmxP9S20qCIHUzdY97M8DySNDSCmULCUIv065bpzLP+jDGJYPclUv1T46Y\nem5BGB/suzjUDMIyFoT757Aup2yZV+fpmHzBNgWa9WuthGv+w/nsxtX3H09+\n9NMNlOEjSgk7l3Bgl3s9ZS3aOohhSNvA0k6CWxqXz1PzXkhdLuTjdmqsyl8F\nCVLlDIfLnuO1izYlYaymes+Jmk3Gz64waLy5rwf/79p8lw36Nx99uQRQBY+6\nsbt6x/OV6wD2snmMuqxWZICDAb/AKw5omz6NnEoiZDr80gKcQVGVzuQMnZZy\nZVsTMmYjn7vza5WDMDV23Bh6/4PW8pP7hHMRQ1YXinQbMJ/MH8fTAFTA4J64\nIVK+th7EjkkA4+nikHi8J3vc1R6rm3NDqvGMalUBW4CkmThYOK3HCuq8WwUF\nArZyqS9Dd07EKt7zebVxY73wcpLo3/eTWjuecWl55bb190xGngGO6GEOyOdk\nrTdrqeaI1ajGjHp2nW47I1yfNCpxs1IBxoSFP3JEopWNYLiAcqGL0BQPBrpx\n+M9WAh20a4/ehYiU3D3wVW/Pw3lXnqto+CpozvuP9ZzhvyPGtMFK72wZ5Gxx\ngP9X\r\n=NKY0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHAvNs69U48BlC1uR6xjb1JV4ECHtL1+RXO43SIS/FXRAiBy7nK7VWIGx6dbehc1GjtQXqKAyhjI1Q7Hx8ZiTdIHMA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.17.0-canary.f7e37607.0_1593553476533_0.9100441385001836"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0":{"name":"@material/mwc-menu","version":"0.17.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.610c26c4a.0","@material/menu-surface":"=8.0.0-canary.610c26c4a.0","@material/mwc-base":"^0.17.0","@material/mwc-list":"^0.17.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.610c26c4a.0"},"publishConfig":{"access":"public"},"gitHead":"0afbfef219df4add1912c90b8608ac93135d876e","_id":"@material/mwc-menu@0.17.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-0iTyehHhdxlZ5fQm2e2m2xIQU2bMuCSuAtuNRv3HFpxREZwS9OLdARcQ4bNurtf4R13BaCDmhahmrQ8XGkdq4A==","shasum":"8c202966a787ed4b4f5a0650eb8ba34b1651b464","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.17.0.tgz","fileCount":41,"unpackedSize":623286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OejCRA9TVsSAnZWagAAG6gP/RjftwVCgC5pkaOVCHyG\nDxb8TVp+9hbz/rDgEj0qiQKmd02WfgpuzKFUZS3OUuvZaRTddonQZNihpQyW\nH+h+hK77gLtiwEC3pk1KYh0t+wDupACCmiuWlqVmUDMxyMoJd7HDVDW5app6\nH4vitSa+Tl+ZQDrjcs6SF8P6nAZDOleR4SmHinZStLwUncavh7k8N2oLMnmZ\ncStaB9Sg/PJha23A0znBMpPG/hinqcTLy2M03/r0HTpTjGmry/UoVyP8lpLi\nke+7JJEueWE55Yxt3AiPYUrtWavfCnd8cehw0ik+5cT4XekIDtl5n/SBJcX+\nk0iPc5/SyxMxmnYlHXJq1WAlGmP2otihHSQxODlMCKozSd5zt9Yq1CUxjBmI\nCv0lc03x9A2Rwfq1JopFPvKGJP5bOhUiUu7E5peQwZ3lyr9FlsAyRpLyUf4D\njoePTfluizj2riImvPkn1Wd21Sa2h/MvBKYfGtIcbXFREGGS0FLPUjEZwJTE\nxpETgQ3RSpBhu83W4YP3RxKdWIlW6xqceGTplkXrWAszwhmWp4TlHdiFRUjh\nBvWwCi/5erg32TtEqABPTkcA+SoNtgcNFFYasSJJ/r8W0OKJmKtcowt0ymcM\n87s22zaPhS9+FAIx34xOVcClBA5PyJa7PF0DXtK48qjkzSOvopoUSswZPEbE\nlFzr\r\n=fpGD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeAN90d0j+f7LrHQFnLosuxHBRR1xxIK2xbr90i4m3gQIhAJytheEnKzVuc8mhgC19+4e1DD2xjVUKKVBa4uKPx5uJ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.17.0_1593632675399_0.7854938093461574"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.0afbfef2.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.0afbfef2.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.610c26c4a.0","@material/menu-surface":"=8.0.0-canary.610c26c4a.0","@material/mwc-base":"0.18.0-canary.0afbfef2.0","@material/mwc-list":"0.18.0-canary.0afbfef2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.610c26c4a.0"},"publishConfig":{"access":"public"},"gitHead":"22b3cf02901c0c438f1e4150ce9513d5f45f21d1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.0afbfef2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-M2WMlMYNjaFHaAcLRU4mhX+6qQFatmtTEkvcl5hLvPC3HcJqG4sNQduSdswUaDEKhNc74i+Nz82XI3oF7/QRGw==","shasum":"ae96ad554ae63fbb415eae986e69056f4443235c","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.0afbfef2.0.tgz","fileCount":41,"unpackedSize":623338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OfHCRA9TVsSAnZWagAAQsUQAJ+QgzfmJHoKKEddi+Yw\ngiT4G4Iuc2wfm4qP5alwoEYqLxLm8HpeqNSIOg35VH4YgK22qp39u4lNQIiy\n3OgN//Slty/SDg33HiAh/sYlQnb8/69yhdYy8TOblICRT43ijYXGQeQit9vr\nxNwHgaHBW0DaalaE15QZOszgTnkwJL1rK/zGjE3vUfABAnHpxBKopgVCugwB\nTTQVgUrn6T0beHiWtU2KDth9rhIecFSwNuV2TJd1kiHnF5u/FzkvyL93nyzm\nAgvGzGHdWssr+sONOze2lJspXYYgv1Sq5uLQrWsZXRURyObsh70VIlcuqSp9\nUhoInnTIzYM/CtrT/13hn9eVk7djjPUCLrB19cleLROTY9Gp4sdzQ5eFrdj9\niGAY7sAOstLBjeFniEcyCI2PXZavIRDg1cC+oggc/K3uLakYF+jOGHqi/s8S\nUqwxuK/GtoFyvWnP0WqBpDnR7x0nOjUCBLKumDXdKqBwUvbJ6jNs1Y3pIEOl\nepJDwL/mZBrDgh4/g40RRzJMGCxfi6Ur12XUydRlG4QW/7tvlszB/CpYtd6y\noduBvvvsiYijKdeiDewIB2H6vxIMz+jWuLZm+PnqY5suk87bnXNlq02CgAVr\nyp2CcgqMOlxso27VfjB+Ub+uSjXuLpr389Vzfn7i0l9hc2hvE43CEVbd/rjb\n59b/\r\n=F3UI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF8PPvpOmO5A0q9qfHcyJP1E/mNhOF+kQdVI8SIHEzw8AiBWJ1eK6VucBEu/Mw17aF4p67leapoPI2sxMLLKk4pIiQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.0afbfef2.0_1593632711190_0.3306121217966609"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fd970958.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.fd970958.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.a78ceb112.0","@material/menu-surface":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"0.18.0-canary.fd970958.0","@material/mwc-list":"0.18.0-canary.fd970958.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"7dc6a8720f1d1adb0ed9ae03d2ee54b539251905","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.fd970958.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-6z9qlx6yq5nl0qVZ+jUXILA4hvGq9NoX76JRAI9QtYDVrV65oyYjR/ufySxFFsjLt2FNaLEIXC4ECAEEtBsSoQ==","shasum":"825e4cd89d3b6294bc0937fd6a3d6e9b2b3b2b27","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.fd970958.0.tgz","fileCount":41,"unpackedSize":623338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/R1jCRA9TVsSAnZWagAAIuAP/i5P2Mp9v4ZA+sdTOKVO\nJUsSXStzb53w4GAljKyo74dJz7chbxa13kgOWe/QrtB4UmX6qFZMk4yoXQzC\nJyvpJHW0lN07N3dX3235B9lMSoJzdolgGeQvfXH9OjFnm9WK9iRnoU2BOxdf\noZaLCQ8FMvxfYSPdPk70F95id2QRUKe2B8eunWwSbxcwZ0dJIsZ2sSRizUYU\notN9Z3ZsqePNFcGokXjvZNoXlURjnIWYOomVPnuyhdZnbctLglxddcmTo4QB\n6ACf05DS1Qh6lGJrh92hKHAECF/NqzxngqalCe1RKximNxJVs969Eap9Emt5\n2bp9BOOZuGzGkBY/5cZyTH54maM2ownxTTT1OeMvToThNF1ZiJW8IOWRwlnI\nM8zDuQM2cFiXeVz3hRaCHcNVd+AcRj1dJzezmGTMpiwJkjJ11XrUGHpF93gL\n3MPzj4bjGet/NlnAzgWIY1G44Bxscmo48f3LGl+WDNAhndvZW3cPiPcgFtTA\nYlenr3RlJEM0al7yi/OrCZJ3RO9NMe072V/23px5kyCXLj8Dj8iT/7LDB4NJ\n0ts/jCjZSVYhHPlPs815cQt6sqw+BesPVIV+vtXExvcbKsX4dv9o4Gm8BewO\ndtDoRCOYckIlmk6V3H3S3LFHAnujSRFcBZCpaTXpHLSZ0L26epxtgLdcoGIL\nRF2q\r\n=qy4w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtSf12a8E28ECdzAYpJTNyEWbotwT1eEc6Dbxwy1MA/wIgFArAb5ErfdLeccaL/OP0ddwuqKRCNfNFfJ1KT86R/oA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.fd970958.0_1593646435429_0.41418371835392875"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fd44be19.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.fd44be19.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.a78ceb112.0","@material/menu-surface":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"0.18.0-canary.fd44be19.0","@material/mwc-list":"0.18.0-canary.fd44be19.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"19ed8b1c754f72137cfbe305df2c3a6be32c041a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.fd44be19.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-mhcHUJSLxKw4MlI6WBQkzxg7jNIRwWN7R1KaYx4VwBXkhHbIeKGPAZfZfZucDsjn/+Hy+9EoQ7T+mtuksHXjiQ==","shasum":"cf24123258ab1915d914a8d39abcad4e232b360b","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.fd44be19.0.tgz","fileCount":41,"unpackedSize":623338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XVKCRA9TVsSAnZWagAAwc4P/2F8PSr0zoD/yhSwWFpz\nbtdkUjy2eAZzJdUqMLgehW6l5V1syIrZD1SeZ7w37XsZj/jlFYxnpqprL4At\nGo/agSb1D/TIN7SZ8frg+1jo+5ciGojzmO/LFF1pZDk01WR0xMgXVyt/jQpl\nRCmbJZXg3F7a4V7bM9MM4+Ng0xZOcnr/blu/p/VSZFKZr7UGc6icnvsZ/B4m\nDX7KED8j5lPvdS0kQfEngmCFlPxzpo26dAFBDA6RnxKwVyT43pFPb1I7DJhM\nqq1SkmBnTyPeRjf0dIDFY/ll0+q9rs/JtuXbnqOMi4dd0f8V4a2ek/bbcsAr\nFzCzc0k/6c2+M6YQ570k+BsB+0XLObuaBRm7xeRe9uMh1vDSAPZ6I5WY4XYd\n4zCpzVkS6bLHmJokG0q9uLyjf5+aAItwd8E54Xqw/rdpjdV3k+A2LA6DFgJM\n6a4di11OVA7pqM4hrA4D3guvEETRohdysbUWqvnrZEgnEVR3hXENLOpzvCm7\n3gzIUd+TKyBQd3X5ZBUNz+TamNWrIeLOp7vZZ9QmfAFuDsPmyh5xamGT+KWw\naCIhCO42y5bG7Z2dRykfVOqFylgp1jOQfCUGx6105cjfRj5dp/NJ9DVigR6P\npgjzBcD4sy9bB4e/iwycowRqHQlvppZzAg57gNst+/gH0qPWFxiMHpa9xj/q\nR4HB\r\n=aaRA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7lgCTczmd/O8ymTi4wOsCEq5lpazzitF/FgASGMfoKgIgAUF67wbkgnDS960G+lHKxYPbb7EMGJoY49Recc3f+Gw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.fd44be19.0_1593668938364_0.8905430160119467"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.2":{"name":"@material/mwc-menu","version":"0.17.2","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.a78ceb112.0","@material/menu-surface":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"^0.17.2","@material/mwc-list":"^0.17.2","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"ca6fc6de0c0461ca30684d96cbb98b8885c8cc6d","_id":"@material/mwc-menu@0.17.2","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-WrQalgdp2NYr/ws5rX9ify8trKiqNUy7tAXlHYAg5qKRb3HpHV6gsmNCScOZ4e95xXJvEOaUp67YDZsma3/rzQ==","shasum":"53cfb5edf6ebc7c9e992a6909f211d529375effd","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.17.2.tgz","fileCount":41,"unpackedSize":623286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XeMCRA9TVsSAnZWagAA62cQAIUZJ6yGFuyBs6hEtgK6\nXDcwMbeOmigAxiTFER8ZC3Cfb6GtSr2HxjZ08uwK7M7Z5U6eFcLrpAIs+1Bl\n+dsQPKgsjNVaNCHf3sD/BpcDY2ibxp/KeH6KKocQAEFBO9A3CszdTBOmIFWx\nzGpcwFZoGtXwjZA7F8PVqIr1R7Q8uGKyPNe43OEqHTFA3CV5t+9Hjab2L5VX\nJ4BesvozhbghYElGgYWC3/Xye0ETlInQ05+sizfP488FhIFduDd1Xcgx9yrR\n2qlGTL4dd/xceRoB7mcLxe/EvDG2HNg3bB0p0MGme26JSBjTgusVNZjYfX4A\njUnqBDmu+4qla2kz+4rwSJGW16OtprYsQ7D/2wW2QV8HiQilEQbLV48wpACE\nV10d7tcG2PU/QmgSFzBDxtb65GMp7O4UQ9LMWFxQqxNzMO+qDCoyPR7rkJQ2\nbmKwlbRn+5uAdXYAR+3RmQAUtH7R5uQmFoOVCCvp9jLU+DqJTerambE5vVUZ\nhwCw2IQSvGgYD945IGjf6sVMVD4zCUrbHD74EwSlQTC9PeY7FgKnRN4iuoPl\ncvv2nbFlUkIezOQIxsdrCWjBQnGbPHBR2Za7jzPQyGagXkAAyZiVYorZi2K5\nzXuJhWH5pmttA7F2ZKSvjnV+Vpx3vm9yZJ989dPArXnq4g6AhisUynpqj9eG\nUYNn\r\n=vKik\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA/0CkpiNw/h+8QS/PmGpiS9Q4AJcm6ReuVJ44oW9tAPAiB98d7oIt+7JqQZi7FnjhGuSSmchC5j95xKf88U8r6nyA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.17.2_1593669516022_0.6121801617266436"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ca6fc6de.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.ca6fc6de.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.a78ceb112.0","@material/menu-surface":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"0.18.0-canary.ca6fc6de.0","@material/mwc-list":"0.18.0-canary.ca6fc6de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"ff7df8fd7df07e908061e32938ae550315d255d5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.ca6fc6de.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-9DUbUgo83yusoVIx2dmrEdwQa+rcchViPpMpmSVZvaXhU7CN2qri9lf+LfOuBYDxSvthLa3/xU+jej9UT+IkWA==","shasum":"ea0cefde90d8ff7f9570b5d6d457e90889b9733a","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.ca6fc6de.0.tgz","fileCount":41,"unpackedSize":623338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XfVCRA9TVsSAnZWagAA+s8P/392uHwqSlQQ2Pv46IIB\n9s/3216y6zxrT7NMA30BUDmRgPIRiBCt4uC3qq4SshJZ5irwWEFTDPKRyLMY\nxz7anrdMOnMkoFR1LeI6KSIcKXBtXd0vjaERLapiwvVWRUsoRnOXXWhXSFKl\nvujz7kOPG7Nl2I0XWnTGKDBSWs4B2gYUdGP9LC4oi+oWUYVk2JA6Dh7EmICa\nItZC5LqZEWnsP+rYbI3G3PMliPogqkszmVaRJ57voTsukRLLgLGdZQ3AZu0T\n2ZrnheTMKY1vqnX/KBboRvVN/hWR+bbLknhLieFgu0hYWdR5qLau2sMidcEE\nHDsgPkBTsad7zfMuomlbtgEgzA9NfOpw73b0PnNRgewJe9EDHRwOtnBaIRYs\nfAKq6hiMYy4a3CdBd1/eC3VUuRWhSpjxvEcMxcQlApyj9zcrnZ+6iX+uYaVU\nAV3v4fVCbh8RuRdneL0dYmmUTy0DH6fqvhlDrDNdg5OLCSW+Ehfd/NAILTHr\nywp6v5veAda7GfLsy+sFuA5Y0qwOtzcsAleQh1CL+CJ2DPSuyJiimIQvHJ71\nMt7wGGrHnvkRaHX9s0UTBVkxPMHT9SCFqgAlpy4V6uUns/6fBWLv2zfXfcNW\n4VO3T1cBSDqIrz/nxkNaM8iaSl5MjxibQhYkYyg06fZpjYrsWTG9sDRYldCR\n8GjF\r\n=B4ap\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDirVk/8IeoneeZNq9FWMrBkp6b+h/Hyi4nqmHedajg6gIgQD1QRS9Xb9Lcma/z4w8RHGA9kDCXn85h0v89lojK9PU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.ca6fc6de.0_1593669588713_0.14919084214526768"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.79f1ec2a.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.79f1ec2a.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.a78ceb112.0","@material/menu-surface":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"0.18.0-canary.79f1ec2a.0","@material/mwc-list":"0.18.0-canary.79f1ec2a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"28823685e1aac950044fe1d868c6233ae753ba7c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.79f1ec2a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ZylY2rvyF8Z57U4zb0FcUDlFIWAV7c5+xE2UC4UxAbU3W3mI3GbuvciNX7UKIymzuQICQEcyByOBi+3g+MvSUA==","shasum":"822eeed4176c1b3c963ed6a0e666778294bfbf2a","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.79f1ec2a.0.tgz","fileCount":41,"unpackedSize":623338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBLHSCRA9TVsSAnZWagAAXykP/1u2Boy8hdOzAFmHPHHx\n2PoZY6waadlAEk3Sxd1ygKWgPHNPDUnWQTDW1utCMymMeuL/BsWuQXyvYbpm\ncZCZeKKa3Hh77Ii01JoOQ5/Pcmnzqhtfmexos+HyG0AWUZtv5OUEOziEaGoU\nO/SP/mZdiL8c9xFgas0tehAG6FIvDKXHFaIHO4mbOjF80ZwYgbjG2tudrgt1\nruUhFfhst8oNwO6GfISQDGCDjYzbT5KQ2CdFxHR75b7CbcvUUKODmVy1iz7d\nj8zATlDLPGkYG8gmDiz3Lewbi2XqECYAiWEIABb0kpBDGczUuLxqygCzy1N2\no4/w3q6NYQshqc4hQJ9z/6uKHEYmKNroE26NjrCn1I5O+9HKQEUVdfb5HoKW\ndQjClZ01LmWn0PZ/dJCqrzGzY4mBXw36BPf8WX3unb6gsCs4TbkLd7A2G9I0\n09+nBK+WKfBdCxSplv2ySVBGxwxIW8nHFE6UBec0qMMEkBSkyVck/ZuAWLoA\naKFpQcvgmYBMs65KxntoewlOipzz2Sr6SWgPAr0QAKZHJlnItTeHzKGLE8tU\n/1/uE6HY37+ScO5/UGAqH9yGtGPEH3Nbv9pX+/cZnO4I7vXCjx4gHv7AjK7O\nTvp62KaE+KUt3/kATXJqwTllexWLtNQ9Fsd6tMTJPRv23QKvV+d4So9jp2Hr\n9csH\r\n=+6rF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEVK+KmTF5cWouCIFR4Fans5heJwSu/tNX6WJGYnhcTgAiEAwS2ScxmNdkazdHJq7dTdHRkMTedVH5J+pzYwL70d/0s="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.79f1ec2a.0_1594143186044_0.7392550723479645"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.a7bc45ae.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.a7bc45ae.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.6ed717ddd.0","@material/menu-surface":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.a7bc45ae.0","@material/mwc-list":"0.18.0-canary.a7bc45ae.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"fe14f2ba9c3850967039fb923e6ca39978290d3b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.a7bc45ae.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-CZEu/Hq2Ssup8eYyIlpDI3XbcyjLGd0aYVZJQL3/EuMm07OeM/uZ1ah7o/KEUjhVkt/VwA+vZ83W+D47TQlhqA==","shasum":"c17a1a0ae5230842fd046829abf1586549227274","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.a7bc45ae.0.tgz","fileCount":41,"unpackedSize":623338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1KhCRA9TVsSAnZWagAAhwIQAIVMXqqt3iYUigWOCzdE\nzFjpXwE8XQQd4WWbzYQOozgSE4dDEUYVMrnhPqcAWg+DY9rrjP1o259eXrZb\n65JZ/osqaMgqqzEZ3T/fk6N3afG4zkNJgQm3RvP15+ymDwhIWxPvSQNHb5pE\nWlzLY8gzur5mYQAtxT/p38TbmNe1kZZXxOCNeWdVhlHxhDcqnJyEm0d1k6nW\n1c0LxR1gBP8LfSiUxkcg+0AkCzGfXMhw1gXgOKKn1mGuaXw4jjgR+QoOhclY\n6BecAQQFJMnurxU/VJe0rHK6bv4vV7cfBRF16/iLKCdHov/gL7oYXglqtZZQ\n39jXBm8wjrXHsG6HYCl09KaE/5uytHmjY8M94W+QVhLewt3Rb/A+uCiDWzbD\nTrfvjlMdeK/rkXB8EXkTahWGmcg2yS5KB/uOVeHkadawTrRP7hICv3M6h6mr\nASdsKYTVQAI2wnKlcTjhTjBiRjcH6p5ghZ6NjZREfy7KvuYp8p/X9ef1IXb5\ncajZLv3quXG1srglACwcOWFCBeLhv9ANbg5SGxt5LDyW10k2eUklO0wnM0s5\nSRKMFcxAgOQJ7oL+xv0GkVmCHAfc88BKUuyak8OwHxMQ3nPxeFtbuA4HxM8q\nX+yJlNPhwF9i+B8sQ+9xuMDR+qG8X6dJDxw04WQmUiL6LWl9hRc1O7Fr7m3Y\nyvQQ\r\n=iS4K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFCFNrnZkgtd25ytmJP0JdqmZUKyaZ6qjOsWoqWI/vgoAiEAshH8nQN8aqf9LEZUG5A5kqB/+WZ+s6jUbQSYU2mM3i4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.a7bc45ae.0_1594315424716_0.9941979517984503"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b184bc1c.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.b184bc1c.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.6ed717ddd.0","@material/menu-surface":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.b184bc1c.0","@material/mwc-list":"0.18.0-canary.b184bc1c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.b184bc1c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-L0b57iJURUWd3uHfUfqrPU+BRCcieizTcb+Se7amcS5FP3pC9LwlpdWTZ5qZJVI+QdolAijPDkCdtwoyjxShRQ==","shasum":"3e58e9269444cf0e1113b9b56cc937756ac4b2e3","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.b184bc1c.0.tgz","fileCount":41,"unpackedSize":623338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1THCRA9TVsSAnZWagAAtYkP/i7GxWGd7DVIQ4lil0fr\nli6eM8UXzod1HXIMYHUOQjmzM18t8iZ0kVEsDO70E7IBCPQdLyHqVefQhpmb\nDQu9DGW/TqDKBnEr1Bfmz92XJTfkRw6Qd2ltTqc0btXwEe2+oXrVbAnIXv3J\n6XcuFjWjYBKjeHt1gdyCfLb8h9IITzbLuVcvu+/0SZmNwIL038QV1m3owK06\nN+V/N6FYFDv8bcH98y544bZ6ySR7cd9CBjH/3u9kKpl5WWWgXq30OVicm496\nHC+S6dl/4iw99SeZnbFFl0QMZMZgcGIAI6TwTRAIx7ZolVpmzWoitdGKFXNJ\nsuQUD1QFgI/LRuFOBvUBf0yr+zwnW9fwQ/qqMODl68erX4Nyv+7HfueKeXE0\nMeiL7QgqrQ0e4N0lUCeJkyZZTfRroFQiI24jqJ9yBf7KME7UdjdnVTSwrnVF\nILAMC/Msumu3ZmLD+DLpqMS6Tel87aJIkRRNfD0q7Gu5GCF7IR9Dq5vk2GXB\nVLUDMa1d0rprGWh0+C+ECyfu8oldtgOqijzVIVjMPxojTFM/NyAFNnJ2yvPT\nndxalcu5UXFm8fyr1yc3cJz8qTPQ1q9a8E5t1XxA3rx0tsIMeyURY6YzFXqB\n3UnAxTwPAgBuTD/aNkrL92BWybbcsk1bQE1rUMGn0DdsapyqNAcUetJtqID5\n67eu\r\n=VXxu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUGICFkovQyAcFkF+/pw8U9ao/nnj9JbZvvIxdm4cTogIhAJX2qFJyZ0ggrNLKLZ5g/IXPM/0GfshpXrD53wxB9nGw"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.b184bc1c.0_1594315974877_0.8147478077815606"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b39fde62.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.b39fde62.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.6ed717ddd.0","@material/menu-surface":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.b39fde62.0","@material/mwc-list":"0.18.0-canary.b39fde62.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"561ab4c73d80c73f9b95c39655b7057d622fa2ee","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.b39fde62.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-der627/Af5EMpdeQYlZiSxWjQnBZ//Kb2wtEt9a7FJb5i0PzdNoehNZU9Z6Tn5+827OgG01aR3j41Hsnp4rVvQ==","shasum":"60f2d875c6f2b9c1928a14883edfba8c74cf6d4b","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.b39fde62.0.tgz","fileCount":41,"unpackedSize":623338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1YBCRA9TVsSAnZWagAAoZYP/3d5nIGBguc1GXErMpeN\nxLeXoezxh2oPYFtdwhPOvL1lHnIbdu/ASqzArTrJi7J9hl/Y5OD1lydU6fo5\nzznV9wdSbCLLY97mYIKXlbPeD9DJ+gMqnadJkk0if21sdOyVkg34yNRzS1Lc\n93C1PK+icghjNdAErgkP+o7qr90J2kdGOdsMHRZR1+qN1kVAsymIrpxvgfsc\nREg9zHJU1V+P0KbXAMxYnJMZKvSd4hae63e7UZ6FvUWpLjwh1tWjidRMN9LJ\nac2rfX01vWiAQjYk/WIb/edM4iV4hzdA9+uDv3D1LGe6rAbo98j/uB3LEto0\nJOV38aLGeptGWSgK7pKoJaPxYl8rqpnixrv8Tp+lsT1IyOBi4fnqM/MEShVs\nn1G86ih/XLrFdxN1dHuioUBcYfgJiWCpTug4tyYM+O++m7qdCIRONFwho2j2\ndYen8OY38/BVH2wEQqV30Us1NF5MzuZtAWdKellreQAEMMYZ3x3xq2VBLqua\n/8VJvDH0pikFNYAUwPH+o95pdmjKBWnfXjn2zmhUQ+2g4LGzGwBK9njzLCxy\nL1O1hbKsC/ZCRzp6LnGAZcMkub5iJAFiRbaHeBjVVLxe8C+LML/hF0zr0lmC\nBJhr+k4Lsm2tG17XviLNY9NMAkmT9L14B6rvLF/oJyWxUAe3fhD0DUVngnF4\nw8dt\r\n=1xuS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWxj6/8ba2b60URpMxkCnNuTBkf7eGTuZETObrwKpsPwIhAMQbF0wHnySUym+QPFQkdfvAj2GNIDFBuvg+JipRTpJT"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.b39fde62.0_1594316289330_0.694268965483839"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.dfdd8d6c.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.dfdd8d6c.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.6ed717ddd.0","@material/menu-surface":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.dfdd8d6c.0","@material/mwc-list":"0.18.0-canary.dfdd8d6c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.dfdd8d6c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-bG4bU+hyxAWefCP/Aq/9YOTYGmU2/hdxU1kP6cCM6DDwymxqmuZEw5kBZWM5Yix5JkmBmT9Bi1NtA39lp91u4g==","shasum":"058c62658057e97eef306fd25600615767901a02","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.dfdd8d6c.0.tgz","fileCount":41,"unpackedSize":623338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2FJCRA9TVsSAnZWagAA1ZIP/0i5uqpdZ2+Qvhh0hr6F\nnvyq8SuhragYIzawLzmgGNQBpIZEoVbmS/WsXQqwd4ZnCu1dYEUXfW7j+Npq\nL1VC09hmc3ov0mz5r5MUYQjQc9r7Za6oiTiq4jYc0xKGoP1dPI4LV1dsOQUH\n6JltLgwenCyYcYu8zX9vdmxGpG2vvUZ7MBfLRaolEGYSaPl/2yQoClPmpurD\nN5NQG8ry79eRtktrvhHb42gZ6W2vXtYQEUjuNME6UHKNgT1UlawXJRziXHFr\nDpMXBPij+5zQpC2OqpnmCp1GjYlt96HhBoDS0Tk0yd3meUm+t1IFiP2VPyDN\nOmwQ94yG34mR3HIbfxXZp08KLyIhvUHTuqpFf+s+5gmgkDEUaA35IYhntLqJ\nbpPZBOHaW7Ot/nUnm1LjCLfz3rgWFJflyUyGd4PocKozmop0VBlVzv2WHmZH\n+i9b0jEOjq3g17LpKLe3KM5Ppo+NNhhHeGZNmr1eq+r7Uf6wvQrhXhRrIyV3\nIpLeZcjSZ/oSObaNGRBm8QI+8Jscks7C/rnlz+1zyhLxst9BtHklknEbIqEx\nAPW9T7RAoThjLqSmW3H3EKxyjQGLQ6ArUxPB9uUO5c0uNZfuYS3RvQ5P6WsO\ntZTuhD1dsL/8+SWBIR2LeDF//v2yMiWBJm/Tw1bpQBCTXYuNNhDo7uF85lQA\n4HUM\r\n=WZaq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC7qk2XrXrDQMO0ksNrSsLLz5X9x2y1BbXSlxwx3qgq/AiAEXjQcf7OJT8JlxjQatVNYJtPmtKMvgd5tzku7gYZCiw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.dfdd8d6c.0_1594319177034_0.28250593705126836"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.11cf2694.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.11cf2694.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.6ed717ddd.0","@material/menu-surface":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.11cf2694.0","@material/mwc-list":"0.18.0-canary.11cf2694.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"652e6b8d96cc6adfa62d59e09d264defbb4f259b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.11cf2694.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-qi+nKY8Qls1gTPzjsjy5l5UnNjFRSYa7WAv0MG/gEKqPnteWTxDKGOinr3lLOnXOWVzsf9MahTE4MUDvcXf0Ig==","shasum":"b4e4682d64f2543348c55592145b0d96dbb6e75f","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.11cf2694.0.tgz","fileCount":41,"unpackedSize":623338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4GPCRA9TVsSAnZWagAA284P/18+F+24kYb6QkJuqd/G\nbGeaYtHKienKWIqhnHDSbxSzaqK1+El+nOq+5nTXJihkYPBOfNE1oSr/apxZ\nBa5zfgjC3t2ebV9mshLDpRop+al/VaJqs5hJ2aOPjrX0rKFwaPWbaez67eK8\nF6WXCSibrz6H/ZclyGKIqFwP6eduRzp5l7a0kHHXND9UZMTPKNFu/YXAAnta\ngBBvwvWPf6hz1A2ftqc+1ctea2VGa0/+TaDclk7qWC1nkgh02ectRn9rHWUF\nTvV68LnbhJK73odCtjL/uqw18k6GMrREpAa5Uv8VrmwRsIoutHLt9DbWe2ED\n4CxWoSSH8PuHfwVdKPxVj26yfGcwp3exofeIUBgDT8O3kO3Vzrc/PjiRUj4O\nrzAvtdvTlT0brHStad1+esk/Wz4zOQAv6XCSfs7dW85JXP4y5IyYiegfTs4z\nhRd+Ad6D6PCT+fRrESQggb/T5WKjZKZ8BnUgagtCau+5VJcqUfi+Zw+lffIC\ngE0QWnvUZu6bkQDz8MaHC4KQdKOOFvXUN6QwAiVsCGWjRbas20SO3E/WjAum\nwr3RZy5JgeuFXGT0biPkqgg3kW3CaLJPUGFGg1KWqHBtm45JrVLvHN0QldZ0\nSli/jm41wjNGwVE1u0iDxFu3wf7lVfFXJE0X7mNeETjUdbo+RM8terKlRt1J\nDk1o\r\n=/LQM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBsycV6H9g4aBffEbbuiOpu5DaM4mJQq74BSjmozfhJuAiBA4zw8ICJc6yfCvFe4nv7oAoLJrf0tdn65F7Vw76dm1A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.11cf2694.0_1594327438559_0.37526230366551516"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.436d66e9.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.436d66e9.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.6ed717ddd.0","@material/menu-surface":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.436d66e9.0","@material/mwc-list":"0.18.0-canary.436d66e9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"95b44ecddb7a4ad5662751540e79c58656790fa9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.436d66e9.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-gYigaQb/o08vEVS3Fyng9kBCrOG8gvQGMcC/D5+cGaMJVpB9Z+zOIz5FRkhmLGkdvu63kqOOXSpg62PQyjkOyQ==","shasum":"ef07a0fddedad2885e9b7bc1af143c59e2e5fa5f","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.436d66e9.0.tgz","fileCount":41,"unpackedSize":623338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4KvCRA9TVsSAnZWagAAGY8QAIWdTBqiK4yArAWooNXS\ntSxb0wceOZbRYP0P1KZsK5WsSDwJ2Iu+CrGEjFCCS6bRntBNLWNYzDQzOjdx\nDgZT6gRqw/VgziyDUsmU+A4+TJfQFUW0K9Fuk31Z+aI6HbUmqweXb/aPAKUn\n7oHgOTO3fUpovJKOBxB/+ODRzwogYpe4n5GyfkxrhDR1bScu3y9CCxV2mu0d\n9BSJKblMekKCs33+cBRuVjb9r/Nqm4V+/GuTde/xihfZTCzYiL3mA5hwnr2G\nuGqzdwaAHkqi5wEjbP55Rzlfc4/Io+hfjFKgAvzcrqkYhN5MiLvZmsUUWxLC\nYHNbvAw0qOTkfabIwDxTN/7hgaOt6m57PJ++XjreXW8k3Gbwi90fSo51Gx+r\nx/dAsBVFpCfebJL/cb0ynsnKG67X6CJA7N978adzhpdCjZ+jmSkm5EUm9/Bx\nODs9fV5rk0pDUEr98XRfNlypqgM4g5lPyRDSqfkrUbKPSfKdKAdBxQqPBLQk\nXNyoEjn6eFJKMp8Kzmn137QrPH3hsfz34Ku9D1I7XQkN4w1QMNTSAmlsYFQy\n/cqC48D6WThbrdCGRJ4aYwO12DCkliymLqXjFdcTq5xz8R/equXvrzX2T2q7\nwcsBX+V/RsYB/M6S0yXlupRfI+N+ZfMm91O78fV6GH8r1X1OeUSUWI6VpD73\nMnge\r\n=GPrB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCsE24/FMiNdkodjqV52iT1k5SR/duQiOBBPIY+WoS1OwIgW1CN75fpwJwOWF7413TUTx/FSFDRdBuuM0+2KLDh6t4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.436d66e9.0_1594327727045_0.014156235248075966"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3a44d36b.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.3a44d36b.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.6ed717ddd.0","@material/menu-surface":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.3a44d36b.0","@material/mwc-list":"0.18.0-canary.3a44d36b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"2cc46bce7534ef7046c58891f32fd054a1fa8b3f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.3a44d36b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-xCEprnCQ568pAWCT4MuOwRtPkf7nzyhAF8k2G+T3sGD850WAiSG+ERz6C0HxUCBtnSi5g/kgnLQGEDUHlKqsIQ==","shasum":"7e5f47432561488f2a614eedb67f0216fabf3c29","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.3a44d36b.0.tgz","fileCount":41,"unpackedSize":623338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB7hcCRA9TVsSAnZWagAAbaUP/1msQmvpLXoWaxkgpaTw\nH6Cfe0Z5PcVFZzQIGTKFu9iVfZ7WZnOJILUvKdzo2Lduz4R4efQi/aDlKc6k\nQrgUk+/w/4qkKtuEPe0LDnKFDdUlKd8yGjZJpTv/Kmm2azyP43P8NM02jFRD\nBO/2oWPKe4+OXCo7649PK7C5zqpYsI4cTHdQ75A8x+xfOOx8eSbAK+/iG5L9\nR1EnnHNyEkTzPTMzeit8J3Avf4zZVwhNWHZIeCudDaUCeKISDcoIuMNg4rif\nEwDQllpt2G+OeJKN3zKkl2zqJgU5358XTB38On6MxRFdXn9yt4deMKofxmWc\nb8Zqg78p8r5xHqwLXKRzb03UqZ/UBinhNu7uxhEkS6o4lz311IlQmiXxag9B\noEKBy33caSmf8DREeS655xqWY0ZfgHQDtzZ025BdSRXUMo84DXw/xJ/78GfR\nFajs7oAPHQSy8MHraTD7/mdwIS/VLt9GMCaEqMi1V3Sy6Zt5XvJGuPvWTW8Z\nqGaxaHjLv04GF3mwOtpy+Ib9d6PfzlV8J21W3G/F18vT47zQ6+xsYKnZb9px\n9EEfjZwbqD3dAUyFEldtPo5qLp/x6GUDwdNX8dD7E7t9LcRLHZm5nOH1hymB\n7gjWmqm/PULv2PvjLjrlG7Zqyv6ibw5tb6KzR+16Hgho/elnA1l16AMljBOD\nsSNK\r\n=7Vil\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA4xz53rtDLLATt8W+wnFdAEiAqHxqo7ezJi1+gGzPK6AiBgusUnDJMklbW32tcppat/wjzL/quK8UcQmPY5IjqMZA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.3a44d36b.0_1594341468437_0.9558309488951382"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ec11ae6e.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.ec11ae6e.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.1e7cb6198.0","@material/menu-surface":"=8.0.0-canary.1e7cb6198.0","@material/mwc-base":"0.18.0-canary.ec11ae6e.0","@material/mwc-list":"0.18.0-canary.ec11ae6e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.1e7cb6198.0"},"publishConfig":{"access":"public"},"gitHead":"e68c3fdbbceeb46e346d694dad4b236fc74713cf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.ec11ae6e.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-pnXBnolea1l4duTTLWu9eY2wDX+2xu68rV5ZqmfOoYyb1bCe/WC/lx/iLLGrxCFoGEXqgn9cuDe7izoSlodZ6A==","shasum":"2c0cd7a98623126b27414141f92ca96307ff5b1f","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.ec11ae6e.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKseCRA9TVsSAnZWagAA99UP/264UOeISnXQsJ7IsmxI\nCo9P5Pk47j3kdgJrGpF2ST9LGs4gmL58MPnb8deOoJ4F4PmBnfrlXmi2hvyV\nnxnfJqfYF6M5YuTFLRRmwi3GqoRMQjzbwUsa+JQM5/x7w0A6hc+2GG0t7Znl\n10XVfAl4rZBKk56hIT8rfdxjHFv5ld/0qLZY7sTYKN//e/EeioWHocq3rhRW\ndf/+CNYMMsV/33rPEjIzS4e4mBPrH2GlZh6KkqrR7ObUliUxDnhJNvaCme7+\nZDded5q9F/OML9o1EWrollO1MCWlN8mO1dk+GdVPygrSVP+QrbYkJ4JuqQs+\nACWlJTz4KjEHB5GrGUyorIVNvo/7IwDntlQPFF5jF0kNZBv5ksHfK14tOUJz\n3UCGspJImOFxdazilE2U2WKEIx/qDsKL199m2gxrFUnDdg6RXCVf8aIyfpAC\nPrbOviH/t+2teYkmLveETQpGxzpGFLVHqFg9zhIZgCpVomf4kWF0MU/tk4Qy\nYQC59uOln0/L75jANAvAL63zCf6Ld527rgvx2bt2HAQD1AwPwBf+WxWEVwZ8\n6JO8TLlaWZ5DbXtaurTJGwJ3O3VOB4632Oe9dx1WAFCpHC63/ApFAhFkUk0o\ncp/oq5THgv00dgAQdtuCEsh0AQ+h2Kd3Y2NEXPuPQOmjVyD7a4BV0f0O0MEy\nISgu\r\n=uQFg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNz83SFYGraXyi+E59L/CICzy4dsqHiF7X6U5c/WwJMgIgUNgUFhv86ThzP21zYmgLEirNoVcRFHxGO28hm3Gybx0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.ec11ae6e.0_1594403613818_0.11321562056484424"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.17f6cf27.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.17f6cf27.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.b2edaeead.0","@material/menu-surface":"=8.0.0-canary.b2edaeead.0","@material/mwc-base":"0.18.0-canary.17f6cf27.0","@material/mwc-list":"0.18.0-canary.17f6cf27.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.b2edaeead.0"},"publishConfig":{"access":"public"},"gitHead":"a622acf92b818bebef7c3f77eb5296521068d267","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.17f6cf27.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-09w4YaLMSBodDqDenbjM93sPdjuxOsy+GW3bxhFQXdLb6Az1pvDqcln4r9HSv+phJ762jUcQ1kAKo8C7eVgOng==","shasum":"abebf1e9d5e153b28b5cfa3004552b7b44495ff8","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.17f6cf27.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLRrCRA9TVsSAnZWagAAsvEP/2kqgIciWXzRexCctFtC\nvuwLvrr8pMxXgdV57WaC84Bng6zhcanmkYJj/ncgSd6hvD2WqQoNQPgqUq8y\nPZJscY4JHZ+WWlMDlxlLhnmD1rQx2sJBaRl8bMDM+xtqFVkiybneAVTJwo/3\n9vKj5VPHza49Hu4jqdr95z8rnnBWZYwkxEbuHSb4cWfrZCUKPLU/cnXDso1c\nd3LYbbgFnLhzCZFFdipb/y7meORHJS06m6vqoYga2IYzXjjU4j+8XVG2SYdN\nAhwy2AqN9Ne5SE42GK/nm/qKD61U8E1vSMkB0oGpl3G/oJfYlcQ17ys0ALA8\ntBQ/CWqbbQ7dl7pJOjIbIG9OENj4RkPab/48sGoHdPdYfkMNtm6jguDK7qHG\nZDf3IVwkKecLwlcvVugsR3hVpCCJtHmh3Kw9otUsHmm3YmhpbDQY8tDKiJU5\nkVIv8j9e8nKj3Mk487A5dWZU31sAuLJilX/jam4T9neToYLQuKUR3AsPua5N\nn5SGoZZNBw+6gZXTzOgzu404WYrG9chytLfWwbZkkMaVA+IalXmFrQlqdcd1\n/wkI8qZ+xj/TAKBt3idPGkjczMFkb6tw6LKP7z1k3BH49xoyDOD40ZThTaKK\n7OQfbv1XvDSflmHTUveYPeuUG4gmKB6uO0nqkO31ltu5NuVmR3o/hf4cIBkO\n9mNs\r\n=4O4k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUD/JH+5qwCv7GyKYb8nvnTsKbdT4XZSAAsRXTULDG6gIgD5z3QvJYwXjumcugmJU+LdguUZYknk7VLybm9EEixrU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.17f6cf27.0_1594405995207_0.09549394123580224"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.efdfbc21.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.efdfbc21.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.b2edaeead.0","@material/menu-surface":"=8.0.0-canary.b2edaeead.0","@material/mwc-base":"0.18.0-canary.efdfbc21.0","@material/mwc-list":"0.18.0-canary.efdfbc21.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.b2edaeead.0"},"publishConfig":{"access":"public"},"gitHead":"d0c5bf147bc31e55a775562b113790bac6052eed","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.efdfbc21.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-2wXlOWfDxeKLI7SsqP/9G1uK7ixq3g5q+WW3dXNUpTFcsOwAkSGx5YnGO5j4srTVEhJs+Zb6+iggjlviJvfMkw==","shasum":"9686030ffe90ddce788beb96fd68363dbbfd8d2c","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.efdfbc21.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLcyCRA9TVsSAnZWagAAmOAP/1swfgSfsPEVPMkS/bhJ\nlDDpfRY2HZFOH2L61Gz7M/FITTSkjXwYpuhPIj7zOoaITCh8edV8NJ28RitH\nLq+cncYhNg9Es4h3tuaKjXGGjsA5Dcv/rfSP3qkWZrg6akD9Xrmt7l8wo8xv\nM0pWv9GAAs7KQAB3qultZkgsu06zGxTsk/l2+wWxGfqIt/YfEjUoudNIJZ/Z\nVZV+uHiUJggSj/NBNGEGJw2ZgkKcLkV14XVUeGeZKwsv5I7/e8FyugykHCVG\ntI11TB5QnaXZ8TgSV1yKeKG1nGmhVy+B0y34sx7mY8f8VgMNouAsrOejpXx6\nxMnN6iFhE1iGLmFSa46ZAYMC+EYqT8QNM2GIHVhmQ3iHRi/bOREWAd6Yxs4z\nXJw3t3GmwCL1GlorRyZedmgOasircw/K+lo04/NXx2C72HXFktakDpYhQ0qs\nkzajwMcESzmz/2dTbykrkaEh/j56BqWVzIR4CsENaMK8VkPBgBnQhytmnM+i\nh/X5ZVUcbK7pZViOlqteay3AXv3zjgJ93zMzC6ZUR5YBqYTkEk0F65FzLjtE\nAi0yconiYQH9SNYJdfy9MugX+oIbZb/EaUf8dGTWlm741P0f5Q4dZgDP2tb4\nLP0PvSRFseQP799mBztyc4H6+dtMa+UcA0gl6pICOP1rWlRnjqAWhz50E4TN\nmdap\r\n=uu77\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHZVGMXc5sDjS28dk+0nUulolbCpJHYEDnREDIMCZxtUAiEAma6HAkXVkxbVt22ZsBZCwoVmPm1jDZmTQoJtMP+pImU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.efdfbc21.0_1594406706122_0.8558789531818873"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.bae4339a.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.bae4339a.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.5dac1f624.0","@material/menu-surface":"=8.0.0-canary.5dac1f624.0","@material/mwc-base":"0.18.0-canary.bae4339a.0","@material/mwc-list":"0.18.0-canary.bae4339a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.5dac1f624.0"},"publishConfig":{"access":"public"},"gitHead":"3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.bae4339a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-MqVaZl8rd66NWJGEyr9f6XinBNtHUkJ36IZSVNL3WXsqfNPgWuyEP+dbq8dCTfnYKQ38QVp1yanrixeQgcRUeA==","shasum":"556dd281fb9032f451e389c6383448b8385550c9","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.bae4339a.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDeB0CRA9TVsSAnZWagAAu4sP+QF4BSaT04Y98E4bNumU\nJ9bsZ0l8c73lOFYBl/jUpejq2aSIMCkXWFwxREehD2+1FtDLkEHP1zq8JPqo\n/5Q+bfoHZ3btGHDoVJetRUpTDv6ZW628KYu9D/GApm/02M52R1P0uvantqPx\nWF8YyKg3B1wo21YACZGMd9URAxPnxVKoxxDvWSzlDPaw7Zsd8xYzbU/CRhHI\nGdIelOx798ldvdQmIXIoHEl7Z7Oadn6R2upFs4jwtKT67lCDP9UuLIFFwhPC\nsII+sNXeeC/DVsNfirHWewfvbryx281ksV0MRijcOjIYSg4q4C7aibZ84iyY\nAXShvfu3npd9STAkkEG2ismarVgZMzdgX5EsT99NBtl/kKg4HTuj52krfd49\nuYEg0a4F+M5cGlht9XMdDQI31vjCb8tLWWWHi/RBVvmCcZPOEYjG87G5jamZ\nzIPts54z4mxlrsFapl1kiIH6c3kQfD35LeS3f+Zb79LRjioZ3IQa1M1ioF9j\nP9iYaokimwh/Ah6NRxjup91fGF2eS2EizL0erNh0V9VOPB29XWIucl/qS382\nl0sYOqRInmg2H13Ci5Ntb8nbUPIaRfSapZlTqdeQFWB7blefACaDHDwkjVeI\nAsDisQpH7HvDHNBQnO2jfRP47qjfNYapEH6I2NRx6z/KIDNub10tU1UlQHiT\nEsJU\r\n=VErJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF72/vkJgrQ+zAHMK9xjQHKKw7oYawvdOuEW5YmqKgchAiEAng7jL3lNZsa9WxTid3ly8Q7whYUKvMmP/lZq8XSYlTg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.bae4339a.0_1594744948297_0.487046136669671"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.28eac13b.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.28eac13b.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.e6e23019d.0","@material/menu-surface":"=8.0.0-canary.e6e23019d.0","@material/mwc-base":"0.18.0-canary.28eac13b.0","@material/mwc-list":"0.18.0-canary.28eac13b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.e6e23019d.0"},"publishConfig":{"access":"public"},"gitHead":"26d5b26372c667630c62d9894c9825aec9e06f60","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.28eac13b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Dw/5BX8dHPhI5B3AxEdL7IG0ByDywiL4Ox2vl/6YPxu85qH4IDMVues8gJQABxKwGX0F0GfYLrnVnwd34NLoKw==","shasum":"251dda2da6beda9fd4395324805a2f174a2e5ea7","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.28eac13b.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDjCACRA9TVsSAnZWagAARUQP/3MlpW8zXH5h5MD/ikhs\n9X2jaoDBt4I+tM7PRNS1mfL2cF+MiUrO47GLFWJbBNyE5uvopb3owZ0ZTaok\nu46Y1j6p8OLNEbLtl2lIRV9fTiJYluN3EWjaakW/cU8Jgx2Mc3m4KXQd1ZB/\nm5sBSTkdgcShTKV3UMmVTkrCb9qAiR9JVgYhZgQZxyH5T9NPNn+3pRMOc6sh\nRXlAA0H83UFiQ67kwmrGKhkmh5pWx/8p+csb6bvlKq7Okt14Por4Lu9jnJST\nVmTgaWdCzy0yCWbZsgOSqCk1TrdJcdcWbppj9QMkre5nVaBLYtbNcHcHXf8y\nTeYUBYRQvgrReVpIevDpQzv2rof4S1aHjz18LTo4g2vVEhXiJWcJDn0z5+Io\nLDr8eZ1VSh1+I7gFUquaDSv5DLyeM2TM7gteNQdQ8RLauLlahKAPGrtyyF53\nMGGf/uQeFm1F5lB+3FbgeVEmJfAk/XS8RuF83dF5+itM4ZZsCLAHLIx+SK7a\nwsYB/VMp6i0tezCVq3MN4KjXeSJb6PnLPoiNvSRfMzGu4KHLYa3R7GBn5uad\nkzrVXJEWS83kLFUDpjsudRC+qnbGB0q48e4g9/x2e/Q8xFaJ5XLBRYEvGZcX\nqwY4hPtg2MWP47TporXcIqkIdPDaxah22SiuMRcYrLaUSoiRRt+MR3LG/9pR\n8uyb\r\n=CiMq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICgr1KEvXzeKbT2UsL6WeZYAh/tXbPXS30DURk+g7M0qAiBozDBOLjhGwsSst/RkfwDICSjttm2hEYHbNc7QkP3IrA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.28eac13b.0_1594765440263_0.21188317860138395"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.44966b65.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.44966b65.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.ad4df58c1.0","@material/menu-surface":"=8.0.0-canary.ad4df58c1.0","@material/mwc-base":"0.18.0-canary.44966b65.0","@material/mwc-list":"0.18.0-canary.44966b65.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.ad4df58c1.0"},"publishConfig":{"access":"public"},"gitHead":"e431cd0a71967599b61ba4219d726819807947ae","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.44966b65.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-TsDRNSG4vWkffcv0vdHtIRnIt9UboChN+e+Llae9ccYqrqQT6B+tAytKCom3vDgNHkoUhZrEwDCHUPS2k9PQUw==","shasum":"20fb73e7b9ebb3ab0d7f748020a7074983b59b00","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.44966b65.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfD0VrCRA9TVsSAnZWagAA/aYP/2i/z/n29TW71maJHcXJ\nilzVPgzT1/zI47uSr1cfn6EUtpMQf5vF4gM3WsK/zTeaLPSqCo0AntmsFA21\n0JWApjIZmkwBke1MVm8vRMLUHdcpJgNOBZAsGZ36WWFTWhM9M2tjJAqE1QO3\nNR9Y1IyTvkY1bu97xCEm01IOJDdyf9aM/CaKXcrH+C23w1KzEIWNCvweBdPi\nEI+aYoVTZSTH6SpCB1dn8ZBjCon6X5bAGN66xPTNCA9RDi0rL5jnoNBG6enQ\noiDmYifvOuqShV6mO3RKb10TyQuiotNaIbvtvkyr1OTpTbzRxFOT7oNzPMfa\nJkVSSeAIWDtS38X/y+qwWVLD3uleaHsCSq0Jhu8s9e5GFYVqhCy6iy1644Ed\nIJ+llHfG28v20Pc/4QJVoZkTUVV8twuY+3S2l/njwa8vO3TASTPa9a5lSObR\n800EOXERltmvbh1lYBia+cL8+UmbyYBlZ6Df6SCI/2QZNuobhsonQsoDi3oH\n3Hz8BKAyB89eeCKIg8ckfGLjdvh6htWkgmcl2GKATXzFAqLNshnmoIcc1YHm\nv/oixGlsAyPWP21In0Sl7gpxJih0N/yFjPt7ixd/7Q/Ykvr2QEWhQkAxKK/X\n1yFZgNwc6wtb4dvHpQ5xeljdaXVoBr2zsGjCkWDzyu0ok/6ff3Jb95pGAeHz\n2kFV\r\n=W5G+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCS3qI6I4B84KF1mMwaLunxCJpjc7nhfplQ9uti5bRHcAIhAP8cZcYMPl7C1oNWp20ZEEVAHkdgj8KZ/YBEhSRF8Dom"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.44966b65.0_1594836330850_0.06818084412802539"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3ef0ef60.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.3ef0ef60.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.01db89053.0","@material/menu-surface":"=8.0.0-canary.01db89053.0","@material/mwc-base":"0.18.0-canary.3ef0ef60.0","@material/mwc-list":"0.18.0-canary.3ef0ef60.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.01db89053.0"},"publishConfig":{"access":"public"},"gitHead":"6fd176476c86425b826862155a44202aed930407","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.3ef0ef60.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-LJA3nRBpWaY/4ekrQnsigCt1awwEa95WNXwBCrvLZ14SgNbc44zX4o6ex03mebjkzWzvOfUMlCmm+BfMABzRaQ==","shasum":"f2404bb344ffa81af34437d4e3230f39c0ec9758","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.3ef0ef60.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEIZ2CRA9TVsSAnZWagAA+6UP/jF9AXtUZE2zwCeAfnw/\nQKGACLK3jtkk40/kUwaz+L/+Y1vQrbZ+K0u8oV4nVL/srUIZRkWm95W1HKXg\n4cC7PvpJleyGQNzxoh5j7pLtKoCOcF8aEmyzyyRltRR8BsYPjM39I49LGG+9\nr4mD3FB97srRXTpq6aAXUqj7wgZgudTsp/NDtJiwSiLy5u+SRqg8VSO3VPmh\nmOcrFKBJzEzHNzyJZVGueWC5NSuTInQXnkA47y22A8BU5pwH6TiS5NfJYL3+\ng2hKmrVec4uR41xyFeZj97ZR+JbA/7X/ACny4eZn+8/+3gMJNs74lqHyiD6V\nsOvcuzvfEtmOutXJ3PpzasyL8hreWDclVwM3xM/Z3JoAnOErRRnmW6hHcho3\nrNFIvKtYfQBASuVndI0w9o9qwE1hB/oszQW6dOpHcfJsh5AevTH61DjgrELA\nyNXVNSWFQJFWUwhFvVemsRrHgKwHMDw2nSJQWwHmRp6AJ2DtwvVU5OkvNV1b\n243Xo/F6hdNGlX2TJvHOnhAWMMCM1945TZPraSOp437+8IFOcyjBUlyhXSkd\n30/okhcpFy8l8swtQUl/OSwF5Y2uhgztsTA+qHvgUT09m0mA79tSpTMD4Mgo\njVGv/rezBKwJvH4w9Mifa+nK9qXaQKsGHfzxdjRSlXpWP7HSbj3fCvXOZ1p8\nPNeS\r\n=6xwh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDx54n4oKbDRDsac7tfr87h6eldGhsO2J5LQBjT5OhROQIgfxrhd+n1Rz2tWUR9kOyF69MFx0qz+Vcf4h7tzDL8+DA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.3ef0ef60.0_1594918517940_0.6872657688933554"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fcebf9e6.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.fcebf9e6.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.01db89053.0","@material/menu-surface":"=8.0.0-canary.01db89053.0","@material/mwc-base":"0.18.0-canary.fcebf9e6.0","@material/mwc-list":"0.18.0-canary.fcebf9e6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.01db89053.0"},"publishConfig":{"access":"public"},"gitHead":"27c24842ba1b663ca72b52321d89d72fc7ef34ff","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.fcebf9e6.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-CT+hzxHJ1oRssYBnp4ldz88r4MttUb9PFEja4b1tDATgsI+A3LpU6APard1YVKTT5Nq1QWnEM+n7JTnexFQqqA==","shasum":"694f0555447f8064a875a61ebffb5b02513740a6","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.fcebf9e6.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFeaICRA9TVsSAnZWagAA9soQAIVZhzz3If68Ml0wmq1S\nR51ysHdF1ozBmNXB/oY4KDzXsKigxyGZtRkzRIwsZK+NOgLkkddjsIwTO0Ca\nKNl4HHXUE0SrHkkRw6mRzN9yhJ96cdcqL1YnlDyVFY2yioX9VG0lV1vpgUOu\nPVwPSZjo80p6z7CVCs+ywMjZJ0L0WAj/E3Q/TVihclunTVVMWo5pGUyFPwKF\nzyh4nqB27j0POxHAGPsJOA2EH5Z0jFgwSUGU/I13UrGKMmPsV1OWejrpRxlH\neM8PcfB7VKRmbTdmXELCC2tCi69tRkqAB5+dbPVbFO75j7jAAtjYkT9H8LUH\nyBXy49tYSUNM3SIuE30D3dglHvrA1lmM6ztOjptbTyGG0YRv76qX71qfZvxX\ngB3uadAT+tiLbpx906MRr8apr+c+4MFQ0ybhCEw0KjYuAIOs74bwu5I9ySbj\nOUxWpiiMwWfb5ypMo0Xv0dlT1E/dtIuOtcbSXIlavnimk+10rs14aYz9SANB\n+XruW2Tb4QJ3+5eOG76ZR7xG6YpsFssR9Q0lc024+Epd0HECR+iynsDG38Mj\nH9t4CbYl3xSNDXwE4InS+cP8NfaD9/bRyr/XP+MfsXS3PUIWZQLjPQO4S0WF\nscjfgvSLvds7nOtyImb+mtZvyMAPqr8LUZFjDjwdGEf5f+fsd1Px94vQLLo/\n68Jb\r\n=yhou\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAjMbl2TRcN56nqU78G6YaD+6AyNFr7Wvn58/XWQHctiAiEAmKxXk0jSbmJkBPbOJ6yAXA6qfQiR9/YKfR5W/IYI5Vg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.fcebf9e6.0_1595270791820_0.25722755579473966"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b6a772df.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.b6a772df.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.fb5a4cdeb.0","@material/menu-surface":"=8.0.0-canary.fb5a4cdeb.0","@material/mwc-base":"0.18.0-canary.b6a772df.0","@material/mwc-list":"0.18.0-canary.b6a772df.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.fb5a4cdeb.0"},"publishConfig":{"access":"public"},"gitHead":"aff69a9137a8578f83238c4b15f6ef6447db7c80","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.b6a772df.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-sSmpJrCEBDhnWUowtrZ7rTfIaUypJxRlxGWHoluNRNFfqzaCD54wSf8r53YaQSAzjFLYsy49P5vqdC39THR7FQ==","shasum":"869527206458c0f24867a82143f42d5f9133dc7d","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.b6a772df.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFh7oCRA9TVsSAnZWagAArZgP/3EWqbK6MeWKcqwd3IQW\nuHIbJRR9czQKp9Xh40eFLcN0GKYcByQoapfyGs7Dnayjp/L25cH4HR1UivUa\n/ivYu/JwyNfNK3Qcrd5k/6S9qI4eGoGrU30PX5wbu6EYWY930Yo5ZTe8h/CQ\n51R8HAoXTdiSAWEN/uDXXQa0gF2YOQNngh53KArWLLDRMHcmnFnIkpgYY1HH\nNiwa7eatCfuGVD62mzuF7bM6VpV2CbimVtxKn4X173jzZRxByC36QCS+SYi7\nHepDfYD329JW+MeQbFD16R3U45eCCDqhX+0kXQE1iEYkHBRZ6IwZXkTmYFpX\nuvuxtqbVcjKECHAayVXDQ6K4DXWGlNTTNazE0Zj9IzVPyxz+vvCsri2WABoy\nUsltf2t3TigAuBt2G+fgFpHQjXuU3nULgzWjB2We3Xhq8A+wY+360Yt3+nlh\nhjyyL3u/3HATuMDmEeDJXdd2il91W0YkgM1VY0fkxKvZyzZ+B6s1uk60Irzw\nxYujEqFjrUErnxmVeZQ4hHz/V/5XAvkf08qsmHz3dFSiY6PYO+I4ar85c4iY\nrcX1f058hYk9Pqi2cmKM7tMkhUVipjSNM4npV/SMauXqeXiHAiyf9kl5TBR9\n8ZyJ2KbdCCQDO8iog0h+mcNKEOJwSHLP0LtSRG26oQ8N1WcbhGAAq41l6D+h\nIFoJ\r\n=ULny\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBhStN+PTZICFG0lcwPHrJhEGL6aqKEJMlMS8/GlyU2MAiEAkVhfCgGUUc2RF78EP81LbJP6+GDo08NUNR59O3luqlU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.b6a772df.0_1595285224057_0.7279505973373919"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f6a6ca38.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.f6a6ca38.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.abcdbcfeb.0","@material/menu-surface":"=8.0.0-canary.abcdbcfeb.0","@material/mwc-base":"0.18.0-canary.f6a6ca38.0","@material/mwc-list":"0.18.0-canary.f6a6ca38.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"44166a768d79b9da90f97e27d954aa263d27b4b5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.f6a6ca38.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-9yiMQE79yWqRmWFyY7tcVec4hbgX0TMTMGNxhQhS9ViNwPDa0J+cdUAo3rBSAmkfbtmnzE/gRluIY+y9qWYrug==","shasum":"a7f4dc5cfc2846adca0926308c05d712b44efa5e","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.f6a6ca38.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFxq0CRA9TVsSAnZWagAALuAP/2jXfBHrXLTSKFVuJ1lb\nPc4GdWz4U5vKBDxyntrGhq/44Dn5sM1grq3ZyAd97I/JoYCvcriDXh4cbw6U\nsWA+LNCgHk9VqquVkAK61XgjqwPdazjHtKQy/VDPeKnIzUklDizw7E0OrA9X\n9/jXOlvERdGSC0gfYYyLwJ/tETljZIe7RS8hBPqIb93jSBLP4MnO4oBFfR9G\nL1kpr6Nm1b308RXuhfGG9dlVjKMLcUXlZOfDbkpMO86vEHkGy/xphPbWDnez\nxqA65TswgljH1GwmDKpfESQ8UezD8P7YFM5TtFpH6DvNQHmvgcnSC/59K9Qz\ngXleCs6j3FsJ8DZbxztPSlPUMPeKJ52PE1YM8cZBxxHE0gOwTf9EJAG5MKNp\n897RuhArroCATJ1jok/IAtBY/ci6aYeHKEUO1Z6AfGgzSZ/0lydfejEAhrsv\n+AXEFBrcH3ZcgLOL86qM5YyoUcLZgf0xTCNBz4y8BaIOIzISJCxawx350hgA\nELCaETKFJmmVVa70b0FodHERBjkyXJTx6GlhNNRHNfOOg91NVpfxAOOY/q1s\noyoQWKUJ6fB21KOPfotOH8VrGF3pfADmKqi8nGAI6m3V7+gu3dk9nLmQ+t7O\nHAAnIGQ/ywuQ7OG9VspXaLx0m7zZty9xg5BJiHGCJysEWPGA5qRcved1T/+W\nhc5T\r\n=3Abw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFuzUvVuGjUVQU9rVPDZMrnovb2jbm/86ylNdkbab5JIAiB7afU91N5da+y8xh6GeVXoZYKfiBWcCpoO2E3Z0ADClQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.f6a6ca38.0_1595349683909_0.7751979185652638"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.647dd6b7.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.647dd6b7.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.abcdbcfeb.0","@material/menu-surface":"=8.0.0-canary.abcdbcfeb.0","@material/mwc-base":"0.18.0-canary.647dd6b7.0","@material/mwc-list":"0.18.0-canary.647dd6b7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"ebb4e6346746ba552191ef32f6686136b75b1a6b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.647dd6b7.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-NWJAYITKD42rsSmbbHOMJPZHrJbW6LxIXFodOokrBHXwwF9sg2hMdX9H2KibR83mf4seHUpmSffhkWbxBwPsWA==","shasum":"9ba12986d20a6477238cffee7464a7b82f29f643","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.647dd6b7.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzetCRA9TVsSAnZWagAAmpgQAJLKxu400XQ9yJIomaAR\ncdPFmuWBGGRkgM+4eWMUjId9ysxzOBDQuBPiONVjCtAW+TAhkeGkl+X5nWHl\nUPKOmLlRxrqGx8Fc6+YbMRxMlGOTC4CzRL2ISFLKIiVg33KSTSfMgwWYZCe6\nTBpP3sC77/ANdG+41qLcIMrksRSMilnyju/wX4DHq/78r4La6pZ7cwHvebEX\nU1lMxzuNpUCFOnkuiUq9uppyvgRPhI0HkhFpcI/grtDFervt/qryvU3L6hzE\n4XDQlQcOGgIQD3irai8oMITotNSxmPjF06SMo7R6j2yZ23hf0NsB5wM38BdF\nFSYK1j1B/lTyRJugFN/BNGMXg8W0DMA8CNdbzH1VXtpjC6h0u/nnFVnHOoOs\n5idyf8YP/iIKIz6ow7WfPcKpAi94QEmgNhUkw3MsAoK2fYe43OU/YjZxxdLt\n+8GyxgR6K96r7IT/7QtW46JC700rkc/hf8PzCIskqFByK2188gWi7Sv3yDix\noDG4Qebqear5mA1j3WRUbq1iOiANSzI4Yf9bWKpWuuTwkKVHKcScTMqtDGfj\n/SFaOerHK5AM+6Wuvqp/8phh5zaAzOQG9TNqQJzySzLAfO4/bW4xWhvwuUvy\nfWD+iDqtq/qVUNL43XmzGVgfwDqW0jbP5Ku2EDPwXa1n7r5IogsPq4pLDX/7\nuXrk\r\n=Bs52\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCh77CrCFlv5x6BCNn2LgKJ0sfsvtt4PVc1ctqr2jUVegIgeulm0iZq/z3FsF6WYTUl6YYM9XzVyPGBE2/akkjKAnM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.647dd6b7.0_1595357101032_0.5104385767439616"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3cb7406f.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.3cb7406f.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.abcdbcfeb.0","@material/menu-surface":"=8.0.0-canary.abcdbcfeb.0","@material/mwc-base":"0.18.0-canary.3cb7406f.0","@material/mwc-list":"0.18.0-canary.3cb7406f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"18d8050825886f251014bddc9658829794a0010c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.3cb7406f.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-cbj/lsAUz9nsCPkuFllKSBPfEvIb+sSmJJOljTBNu7JMmHlwDSMSt4oFk+QG3OaT0G5zaYexf6kUf3PTh8iCFw==","shasum":"93c2600718c8337349cb479f1abdc698471e81ce","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.3cb7406f.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGIw4CRA9TVsSAnZWagAAn2MP/RlZZ0mZ5VHC4sYCPuRP\n171C53Yx8nMcovXX3csOJ/AcIIx6aXa0hwoeQDZrhOcdBfAr9U+VFQZnkqSW\nEd1Hwo2CeAM+XYj/sGFMIFPHkVrktzw1WOONQIqfnIF5cs8hWF9tKUtZu23i\nfwfNFVWkKEWGJp/Nc5e4O1Yos1cv+UcZYJw+VAE9cEOxHSIpC44Q3Sh0Nbcm\nwtOfNC2xtzWuxiFsuwuw+tBdkFaksAPFUZWz1S2xpz/cZM6v0PXxnBh/IWjh\nw38w7N+WdhN3Ufcf+LXCiFdkAawzaF6cS7DX7Lg45uaq8reB0z56x7QwFfJc\nJ2FdIyu9jlyHCt64NjIbT8ENFNqpvrjJjzVE2N1TDnp9eg4dhq5qWztOVDSb\nNoy/ta1kfYOekk1DHmcL0GAaWFbNnWOHU/APG9uyFoQOmNWSE6VosbDw9c+F\ndg/xDg26Ypm8OfJUmriQkTy5hUoO9QpGhYbUTrXTrvvrxmxNyzCCNpGbi0+B\nBOkqZYmB/iaKG+J4o16tMqea+L3uoMWHrfNi0pMSXttfpt5sP6vl9ME1S6Lq\nKuHuPlLhR+EjhQdfVpQa2lH6NaVqim1xjsggqfHtB8P4nOlW/TzDNX+Bmv6o\naf7rugMJJN6GlHc61MQFZl6GgCwcQ0Z1zgSHh83c7K6f56W260YCM78JAOBn\neDve\r\n=f9Li\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKkpmqjtYTONKTKeca/hjB5j1qD522z/O0LfWgNI479gIgayR7UlNpynRJJRhvFCsLC+dmu2AnfiRcEoORqY+L9ik="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.3cb7406f.0_1595444279588_0.5409564530688311"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.5717a5a1.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.5717a5a1.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.abcdbcfeb.0","@material/menu-surface":"=8.0.0-canary.abcdbcfeb.0","@material/mwc-base":"0.18.0-canary.5717a5a1.0","@material/mwc-list":"0.18.0-canary.5717a5a1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"80cfd9e67c10918291b4799451796c633cec6f96","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.5717a5a1.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Kcrrz1CEBU+LttGFifjgZnbavfaEghLLcf/U+bkWqsGwYIHnAxhlB3EDn1XRl6mG3do/IJNn0P/hVLZgkIfivQ==","shasum":"59b3b606d1d0e4cab736ccba177e9240aba55769","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.5717a5a1.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLJFCRA9TVsSAnZWagAAYggQAIvelgNBn1098WZFhGew\n2hgd2Y8Ly24p9QXqXM9Ai+Je+OJqJ1Wby+nvXYrzokKxxCWl5/SHACuS9EbY\n+MEeWiPIvOnuM7XOdm0JoSqq1POy/yZywDf9NoCqmeq9FGuaXPMX10kWUOI3\nrJmeS2Cb59Cq9N6gqg1UuZ+vXLURP3s7bCzULAlpf5JtwWEa4qIonpZx64aK\n5Mv33YKqyBWC+GP/HXPjnxTToqa/Wat8Tz9DyQ7nQYdiJbXzkKrdbVYBETPk\nFobi+p01FnRibOFcmkz4OCJdKTInGH+n2WJeHmSFcPcpjs/iUCrZNlkV69wP\nNmcfN4V1sC2w/vzzfx9uavaoV53fLG6iy0NP4AkT/eWWxxQxVZ1HYxfUsHP+\nEPxasg0aMQISH5pK0DczLmnIfbGLgRa6vyXdgIvrayx1BhX2hFnZq4Llzh66\nd8PoHFQ7Cvs3dUKmIuT4+z4qB/jC+xKiLlkoENzTEbM1EK8bzqoJh2ROXEEV\nfXS/haPpc6UFEYvj/xvOzwHLMIdVa4Upp/Lvd6MR3E6j46rVKBSpMHn95SlS\nXCXBGzOUNOjIbit02UIoDv471gwZXf+3UaxEveyXxmG5d2Z1FOhj6q3cjXJ/\nNc1YomyNNg6PWhIVHRFT2dUkiceFb5RQhGORFN/03QJ3+wHO3rIcICvmy/NC\nNrR4\r\n=2hva\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCybFBFzmXTNbEtDZDVQgP8oGi4gcvjT3A0pqCYivHXzgIgAT+Z7LAd/0ScdTfIfxoGNQuS17QbAFMsjqv/syXvS9g="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.5717a5a1.0_1595454020863_0.0562984913154847"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.d84cd4b2.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.d84cd4b2.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.7bd5075de.0","@material/menu-surface":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.d84cd4b2.0","@material/mwc-list":"0.18.0-canary.d84cd4b2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"c90ecef90fa937fc0931100e4f1d3627211865dc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.d84cd4b2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-/dlBRaamx7f4PmMlKuKsmLrvf/o8R5E4EizNTovSIX5/bVm3AqR50q3sYYKHa4tGuo+DIXnOlPQHopaW+JMgfw==","shasum":"255659b17407fa16b5fac5b6e3de5d1abe384358","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.d84cd4b2.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLLACRA9TVsSAnZWagAAdyMP/2N+VwlyJyGhDdxGf64f\n9m5EHwXg560EYlMYSH0lRhYy/JnMJM5L0qp1QsljMBzcBS89Cj1VF2bHu5Di\nBaEleuVGuPaBMYZ+tso11EDUJIIInOsn9Rs7GuU2JZxe/r+qmQdMmtqzt7yD\n0J55dBwEchIZUkPXNs1c7YQKIGGLmyS1Nzo79qjmlIoN3UNBLIMvS4xXBxRK\nL5vxusDZG5TpraaRrtbQXBnohuuAEtHQzWHFRx5GhphncNFIAohl/0seipU4\nh/w4XS+thh3HcuZR7QQYs/fijF5/j1c9Ky8MOU88xI/v8m0uG68YL4FJgz5v\n2GIsLlJ6r8BnuoM9uEqAjsqsPbhJrdzOveGl+vK2hFCPcDbtGZr+MiVvjqAU\n8G3Y5GCdKOsuBHJAgazzksCxJLKMszY1Hd6mj4L2bq1ZpQQHGNv/axNDwPyY\nJ6u1iXcEf0Ug1f/Jitmt4ZOkcfGFh8EIim0Ch29uE/8XDNvMdo+JDg8ALKv8\nr+ZV9SDR8Q3d+4cm8uXJrj/0Z5mA9uxw3LQSXRcEFyFX+885XwBn1+Tk3pAx\nX22rHrGG8mwnd97cRAD3JOfJ+PpDm1dYcUltPxe+v0Tx8SLtErC25jG6pGf8\nWX4cCpcsOgKPFA+/6Etbdh7MqMW8c08sTAiGYdK38bnhSZXQT0+6vvAVzOTq\ndMEL\r\n=BApB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvlBWc7wkGO//GMAh2ZpBB2x+rDQIXrOtBiXf4uON7PQIhAPTfDg7QG2MMv24S3If9+5QuxNdIzzm0KQBczfXGfW74"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.d84cd4b2.0_1595454144115_0.043932415023682614"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f279e7fc.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.f279e7fc.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.7bd5075de.0","@material/menu-surface":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.f279e7fc.0","@material/mwc-list":"0.18.0-canary.f279e7fc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"73c3335df275cf5fb17f3b990df9c4b8184ce3ed","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.f279e7fc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-badT0QxvyPUS3rlEi+y1duwUOueSgFmJk6CjRunNo+o972NBXaaDNgYCORIdXIFNUaupAZLWbvuB7WTAX8o+uw==","shasum":"6f14d781152f8d70cc5032f72d62e7d057d84d72","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.f279e7fc.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLcnCRA9TVsSAnZWagAAMcQP/RIteK9yrdaPrboIBFSG\nLuykhm6O0RVyZ3Gjte8hzfs/2gLc9G6P/4tcVDdTAcBr+gLbhSeTGXeJx57E\notF/NHKTpEJUW+VzCZikztFE1aArgvhE6FtgpXp9sPJVGtkUROK8GlkfgjCS\nCyuPetBhjBrBFeze+CA1rpWjWRdJO6BJkTiigWOLW/1CM4gWj3YDkAaTqCUH\nvOuc2glHN9/Vrhq79FtLJJgGr7gcE/RCVaYjFaIbgvdggrFsWOfU0+HCbkZV\nR6m7IMHVa/2A2VOwskGsy9X8mQ2bvcYFl2eBQ6fuvhbKXXm+tcOpAQ5kc8PR\nwyzl3EUIg1WTBn/IVGlAl1ViBtwb1GzYAQwzPu+Zj0qwh81uKrj6mKvVaFav\nK9KcXeimZk0MaN16u2llg3l2aE+Bie31isB0GQyUrVZsdlWHRPq6n+Abv3nS\ni/2MtOpm1FfUauMxesAZXiMF6/r87fkBHB3A/Pr6r/t6k79qlst8j/y4aHAH\nz3euTlMA4eXkeGTTuapCP16zbjdX6NyBiUto26YDGOS5qoK3XQmyZDLwMs0W\n9Z1KyYZB8gAhLXWcbgtDqYbuPX5MdsLd0bn26aI508+fSx22GbXt6Hyp/nCx\nt6b0IyN/vnSyf2LDPuplg+ogpoSr8NjTSnFbjFez7Rouk8rSmbORnXUPezOl\nViKV\r\n=UiHJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdrHjxAnBEcSMzMpEdcVoJxyuXrRME6Tc58E6OWHJUwgIhAP1N4t5cEac17Xt0fkPKH/GSBc4/xzAX69aCwhGbKvzz"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.f279e7fc.0_1595455271345_0.1203818591718604"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f181e3bc.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.f181e3bc.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.7bd5075de.0","@material/menu-surface":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.f181e3bc.0","@material/mwc-list":"0.18.0-canary.f181e3bc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"33201638ca11f3c34598273b4ab4ec40bb019951","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.f181e3bc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-sO/ajty3NSIZByh02v5UGvVAv9prG/8i9SN6AhrRSqChr5HlVKjZZyHHKl5HXWopway8XaXk62br9qRqVoZcCg==","shasum":"98802fc3fcdc46fc5d80d6b84a5c8115b5ff3867","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.f181e3bc.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLeeCRA9TVsSAnZWagAAi0wP/jZMtbuI9hOPr51Lk1+d\nitbOxd3HoPbXqY292Kq8Zc0ldvmNZNM9vWoGhbrs0H23VgNskh/742HU8Jv7\nIgmCuOQv6t1Pqev4FrKCQCpLz/NtGGIppKTMmDhK8AWH6Qfn4vippUFiibbh\nPsDG9CuV2q9ahR9V4kqyiiUyHkgnUwuKe0jgN9ybNg8HhN0QwwjBO8E76i77\n7Zf7w4flGO7Vg8BL7Wg+WCvMbypGMffFTxctOUJoD4IyPPlA189QAv+y94Vr\nXogcBstlI0691vpcdqiUOTGh/RaBm1b5Q/12HeApKMGUz1N1JtvnSUMbZPCs\n06WLYwJky3e0DTi5jbteaoZtn/iGInppqGaj0oq6eqYrxxa37Nc0DF2/cnwD\nmM27cRhHEo2cFbN255GoknwXlPUUt9Y/KFPU940vYTC3npjVYmlC9jPu5niV\nPQFrbQ7QGOG+F+zPYxi6zuKR2xqJOUYH1qsHXHOKPHESTHA8hNEDBjmBw+EJ\nsbM43df7prxTkurW8jnP4mS5qLIszupDTDvx8bTSa+Nu9rHNnM005xmTgnb4\nTVg3VadbpxZPbt9ccXyPd5lpPFqKfBQq2b15rimB7TIa5gS26uBqT/1DNhtv\n/1TyKb4rWqQ7VBeo7QHAamaIz+leH5bsPYNDCaZnFdxC8hKB91s0qs0s9Bv2\nG3yN\r\n=OJX7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGTxrw8URrYJKPqtOA59LcPYK0VNZWJtqHzh8vHFEwSWAiEA/cb/mDID7qhqdw4uuXA2XpwQMdSr7PQfBF5t8QGrjiw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.f181e3bc.0_1595455390131_0.7970912251960718"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.346a622a.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.346a622a.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.7bd5075de.0","@material/menu-surface":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.346a622a.0","@material/mwc-list":"0.18.0-canary.346a622a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"03c5331dce90f41a530d3c8569d87c9569257d13","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.346a622a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-7k8nhHuED1hFTL3nYiIzh0IHJGSsBibHd4J7VoVMuAGaVikvHsPFzV4MZfOjrJq/ZT7I4nd3J7ZKUQjUeOjw6Q==","shasum":"8d7ae5cf0a4608bcb3b3e0836428f04c417b6f0f","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.346a622a.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGM5qCRA9TVsSAnZWagAAOLsP/RhXcHgyy2xn1rKzV9cl\nEqlFxxkUE0E/RlYZZNIIf5wYWqrF4gFTdZoCWVfjOaB4Mt1AmiToOekxKVzr\nUGGFDZe7T5XGXT1rRKBo+Xb8RaTLCfYJIkJA3oQlTFa6luijcykUVjBA+HEi\nw0CyZTcdU0OiQhRULNiLi4ewolzefpR26/9nebwv+t98FMapnfbeTZ9crwb8\nyHsNIDFVRrwOGA+AIH/8V44Ql3/3uPL/cg8cy6bFC3C2ZXzQi0adWEc+Y+De\n2NHf/wIjZhgB6VNhDcPi3iNvO7VbDm21ywWMwcFQ9kXmItZper5tWOp9ncbP\nBUlyXSCbB8e8r9K1QuPWIsrHY3Y6fvdgXdHzIwYtl0SWXtlVBnMVhJNi3PJv\nDHzUPs9IOcUWcGG2VIMGJ2b61ClJul4UlcUpBOkgRKdQpxO6CmNio8Rp28SU\nV/+dfH0OfhZvQl4DF+uPXYtPV7uyOzlhS/To9BludBufIDou836RotXHVGLv\n1qxLLW/9IX7jAZ5YNCTAUel37CmZJaZ+XUB6Az65ng/cdrtjTgZZ+dQ9RpoU\nrwo4dKDnADckA+yJUSXqV3ITN41mKYSsJmzHzS6qXtnse0zoJs7A74t5LaAw\nGuFcN2e1Nhx1dR4hfH32nUklgaT/jN985k3rWPMVeYAgEB2tRCSRiAKzjMBP\njtZL\r\n=eE4J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4KUaQiNnBwBraay3i1eiBHqMROOe+pL4PiWtWBfClFQIhAN8PoZFk4tSsscdGE9sJXtiQxLxnWG2ZTsefBef1OQXr"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.346a622a.0_1595461225936_0.4726156891659419"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.c9e8a848.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.c9e8a848.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.7bd5075de.0","@material/menu-surface":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.c9e8a848.0","@material/mwc-list":"0.18.0-canary.c9e8a848.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"bdd3a24691563386cbeffdb8824ffa26a3c03ba3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.c9e8a848.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-haCA7AUwyqe9vrHfag60P5rF7mJywe/9DBBJVN5GOUN7SvabYVmoZcHus3KvSY5P6aa+3jFq5dX0MmzCNcjHyw==","shasum":"784333aca83220498755c735d4db37e4efa3cde1","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.c9e8a848.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGOOfCRA9TVsSAnZWagAAXXMQAKEfOcecCdG+lKn+8mpm\nXE/Xq/KVYLMgh53CdhlnSZOH36KSvUqY+HgCD9IuAcubCVtQsDs2zq0Dwcmx\nw2YbBAiiY9EWoYHyNs2ZZnvbCfZek1SGI23gdZS8lHj3y9b7m3sgKvPc4qqI\nf4IKpWIvZCqDZQuwOG4rd4ccci8H78AzZLI8QQF7rP/B6kfk4N+D/KCvINyv\n7DiXQ4vnPSe7TrK2CIAQjFPW4Qw+/OO4pUS/YpMzHFkUUp8rUPl9F5oQG4I9\nnwbunqz7qmAF/GhgLgAFNOGNi2Q2PJL8zTRzs3/buxVvo2Y/xgWuqew2yrGB\nIRvCv/pDZe9PWLygGRUo/7GoBL8ETLohNlFzD0XPkfaXTrLa1Efr8JoBSdww\nMK9I00CVW70dPIukwNfD3CDZ3Q6/WmUCCDuNygtbs/EEYa4/nSOtAEk+0r6c\nsbWXzOcukjYZZ8u7C+EV4VfdMccUKYBhmiFTQDVYszf1tL9Xeata5ghEg0wr\nL0uja3Vmw5SV+rocBxr+qShliBbjsAseSD5FA8eSD43suXm3hSHGe4i2HIhL\nQPRcqUWfVjKLkNVZz9RGjc+s3VrykIag22nUzH35xedE7TQAwF3XwGb4TA8c\niRyneTbxe83NueVcnP8XU/LOVoW31z4P2r5nkqmhoNLWWCtUFtUwJ2EMvl8V\nKlsy\r\n=SKaQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEVGG50Kztac/1k8pz46QZC6dD6hJ/PlnNG5mxv2x4DgIgV78a9CHZRRogXVTFua/Nj/LdGurzcQkFdYtw7kfVd/g="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.c9e8a848.0_1595466654375_0.6671501232099"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.718c385c.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.718c385c.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.7bd5075de.0","@material/menu-surface":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.718c385c.0","@material/mwc-list":"0.18.0-canary.718c385c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.718c385c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-spYQkR5d2Tc0KYf3nuWQPD8aSJEa5WwFdQwE1mPoQGTX21DsLqo2FBPZTFmnPGW8/RRHD12SXlU3Ahs4frMyIg==","shasum":"a7f94515dcc4dc61395153b5d32160b5933dbc8a","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.718c385c.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGe3jCRA9TVsSAnZWagAAVi0QAJOfuuO7G8ShfX0QJXRp\n2PX78IMa58cLo1cN6A3dWxz5cgTbnoJZzlpAEWYOCEw+chJ+fOcn1ORJKhAt\nkQZ1raR5T0uyAXXKn16gKDns+3rlUl4jqfelRmWLQ7t9FsQ/zM7NPIZOmjUq\nc0TdIACusZWSuTJAKXZZkkI/m6UonzsIqZV8y4uZ1iCKoV+aRxpCl2V6u7Is\nDiltuThwfxUlnsOxHkSVCk9XTVB2bUsFxU2mHLhWtc0KoB2isY5xiEnoIWvj\nnmBLqSqq2bWeXCJjhQMGYcyMiZJc7CC5aFZSMKKGVfmAxP2JvSNx7V+w9zs6\n0S1q3pEbYDXOFQuZvvnAM0nossLCuk6BqKzxQJzn2NqgyfCf47ckqXMMWX6A\n74upEfuwbRu4GhJOB+Eixb8POhqcCBkSefo/p9hx50BQ0G7m+aWpJ4kQ5z0S\n8r004DOCZhXECH7yUtSNwOPKg1IijBE2aTzXeO/1bOx15PUSIRP6t0oQzy8i\n1nprlq63e+IMHnMLtY/gyTlKoTa+Sq++nsceTW4/6SEpVC2AiMZ/eSqeZoAG\n8jGgncdtjiz+/booiEQB+mcnRefvlmy0ehSU34QLujcJ8mxfBhyURSZTwwKm\nKWJCRoCdJ+N5HwqJFdXJi/ZVzsHPx03czWL7uMdWK9GcX/PsfgAbWOR5w0xW\njEns\r\n=fq0+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzB7wkARqGx/7A6nLVimI8EpK6jcJNfd0SV1G3SzatJQIgCdSDNycYbu+KOLAwxR3X8egforn1OQMJEPwn/nVmmdc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.718c385c.0_1595534819236_0.7520236841297039"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.cd516a27.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.cd516a27.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.7bd5075de.0","@material/menu-surface":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.cd516a27.0","@material/mwc-list":"0.18.0-canary.cd516a27.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"e3b4c123ab8be0eaab91697be67dab225c8ea378","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.cd516a27.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-6YHeom0WYGjgRQYe7DAztuaPXI7QubnW8BkAzwqxFL+x3L/npkt+/htZx5+xg0L5+NaQVJdvN92XZqZAnindZg==","shasum":"f7f7b5b0bc6d8049c0db5b7aa7d34c1fd6936e8a","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.cd516a27.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzJXCRA9TVsSAnZWagAAVF8P/2A0tMzh97fsPIZ+qhDb\n99i6zEo+82rAvvhOVzUuj3SvEAsM+mFHhww/Hkhou1m8+NqUL8wHjpNbe+Fi\nQa5NVSq66O7ZcZiv+O0nfitnWAonlszM0H6vy4LtaHvm7+O8UCvGfBJvCMjN\nLWx072SMRcu3NFRDxQXYTNK2rDxmHFkaVHuyVVqKDUSvGbq1XBFmku8dVFsD\nYo/9obGhePYn2j7NhgI0RLu5h7m16YosIgLUrNSeQ9NkrUhSXMVs1Om98J7C\nEhwjMRJfygiXYXvR9afdwtutdRFcis45wvWcS63YVl83Ilg8Ewy13V2+4uAV\nFC2WRHIfGIxn2BtYJ84rLyzL0r+lIv9izR2ltf6a2C7WoEn4HvLSKYp6AcI9\nh93QpCN8DiYxxVnnLnozHfYT695KGaGkW9FZFC8d7Q9BPtpK7ttVISEO8G0z\nCczTCrZvRSaa3RRgzpXLt0BHFDM48kyuXpshcEBfNkEX7zfJaDsrCCO4Va0Y\nLjkzE22Ond03lN+lggdRHIZsmZ9Xh7aSTeMlDKPBCWXo9qNsBPLpULvhtD5k\nfNZslFu/MgX1jYWWcx3jrWD3RMqeKsNKFX6oUAg64qW7DLww6ngeAriXvAJa\nOChdXJulZLG9BJ9ZfNOMkSKdDaTAt4b4O1vLbm31LiHWLkxo2pdLkuzM0fA5\nYI8K\r\n=3nlV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEEwMSdY7MSpARLM99BNsdVrbRXjkcAX0gfnhihFavndAiB+nXadJB3AGIlQnZQqYSbNxKraDl7tiPkSTPeg0aJIGg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.cd516a27.0_1595617879428_0.07866303579448952"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.1f082191.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.1f082191.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.7bd5075de.0","@material/menu-surface":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.1f082191.0","@material/mwc-list":"0.18.0-canary.1f082191.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"ac40081dcdf0df5976402e0f1f63b1efef1f945c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.1f082191.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-LFSdOcgkIJB761NpyWIxGZTyvxysTRN978bgbIFkN+liHkp6Aih5yX2ojfg6Ij6Et/I1YTAx2WYgae/Znc16oA==","shasum":"d07e56344701bf7093541a95024763ed389bba28","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.1f082191.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzOXCRA9TVsSAnZWagAAYDUP/iu0qMueFB7C1ynD3Kk+\n+iDRyTY/f7iGxeLFm0GYNPzmubb87BOzZy+CxafhCsWfjPAVN63uTC+Vebcq\nwDpmE6fNnnEanToi5oFIpDaApcHPKbybgobRfO5yDs+H0VFd8P+hDa9CcJYO\ncf7CRg8byAtU8yodcq9aFiFrH8AcgxDVBJE8khx2SVxQffkHhleM6iB+3+kj\nNt7Rfko0Lo8X1RPJXYMBeS2Xycugn30yhykP4gXMLVx0R6JYKvQY3zHVgc6B\n3d8ecrT/KqnY38S/9SO6DzS/7Dt/556VA3ocEQEPbIgRy3dUsvKmj+bxhA4B\nOQ8cQtFm77C/56YK7A+p6LDGbRHSUZ3pV9jyELvqNBX+h3UJKO73ac+HiIni\niPJCqS3pjAYZRHXoQWugvbqGYnjQ81JVLn00SPUru+0poHTb0FsUMcc11muK\nMKXuZDzEWPnse3JTSRW0xYHPCO79T8oZj0FrKxkSpHqPuDeJ8I6YVV3HHg+W\nQGQy2Niklzvy9OxVbcl3gybSVIYq8gZYy/ifsBufLBZGWcgjVWLlCYQ0Itjt\nhKaGoAcVHbpYbYkhn/e6aTzHU93mHTopFu6UQuyFy8t4T6PTVYD7yNyNfvbU\nhoFZfWsG4Pjgp8L18cd7vyEFQ7L5ArnETH1cqvbJPZcrFdJHTvv0amIoDK9W\n03Tz\r\n=qGNF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAdlT+jlZtx1zRAsoGN5KlX7+e9u3YocEj58/0Kx4D9LAiBUm8TUEKs9a8UPTLpQRe5ANxPp0KRVKd5TUglFYAtekg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.1f082191.0_1595618198856_0.1962959588969182"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ea3e82dc.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.ea3e82dc.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.7bd5075de.0","@material/menu-surface":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.ea3e82dc.0","@material/mwc-list":"0.18.0-canary.ea3e82dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"acc963dd578ca338baf9c6d33a6a341a215c42a4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.ea3e82dc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-mEk5e1vTXoVA1lW6ikS3xf7FLvzLMSkNC7BRnnN7PmiSdWjROsqFtivKyJQnq6CLD9BrDHzkrtHCStWN/nxA4A==","shasum":"48ad08319d81b22d603f5d67a4f9633e8bf71b1c","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.ea3e82dc.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzTSCRA9TVsSAnZWagAA8xIP/2KQdcESgN/rvyu2+U3I\nV/lDy1pF4opa4fIiJfu0AI3tkpbkNhvxcaO7v4EOqyjXRFl95TDkSS2vv9Fz\n7RWGq0l23fkzGiix6gCiPACm4viOCqYAFak3XQCA7geJnpH4tWnyV9o2JtIv\nvuRn5XnvXOM4fyX1KjNB9Hh8zC5q5OAb6zy+ysz+jYFroNCJOyuLYRj2sJSB\n7BRBPUDVSuKQ1o+tPESFagupuTRUdsOm5uPY67buHLHaRldUT9V02z6mu7WM\nfdWULb2ZT+4N/JEisaKD5fWirHFncnu2xR3vPmLlgGZ7lxpHmw/XtcxTBtpy\nuU/UKcg+441YeX3Jq+rRUK067rTXMyZ8CDx8WUJ5r2hEiUMSftJQjkZAr2Xm\nv/a92EAuzQqtDITCyQYlyBU+gGKNTOsrkd3bHkwo1memhzsjQM+J8C7vT+2Z\nZj/gbqgJRU4CQfQORdmceuwCZse/AtEgbU4ArBQ4W03kyMJE1TN57jz4GZvC\nzzdku0j9A2M2tf7nJJIEqxxmfEx71IjGMa4LLLPxPoLapFHeT4NXEb+yLNaw\nhjmpq5eeslxR/S1HFi/G9rP6iHv08ipmhCVKzfwOaN6ldsvuGBVbev00wFpb\nI7s8o12fA99NMqkFkdmKGGAroyMFSHN+a0z1naH0f4U1r7Zpa8fBQhNbaMsz\n3PBR\r\n=djEB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBRrfPUF7SkxdfAu1RZKxiX7sbeHl9ZQC+2ZA46NQVQTAiEA58KZR26vz2c9G/Ry4qYZ/JXB46LRmVKlpjSyvy/NVLI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.ea3e82dc.0_1595618513999_0.9228260646745872"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.94987b64.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.94987b64.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.5511e0aeb.0","@material/menu-surface":"=8.0.0-canary.5511e0aeb.0","@material/mwc-base":"0.18.0-canary.94987b64.0","@material/mwc-list":"0.18.0-canary.94987b64.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.5511e0aeb.0"},"publishConfig":{"access":"public"},"gitHead":"53896e3bba08752d5bf8b9c64423a52c96fc448b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.94987b64.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-lJ3OHvFpbVUeA4YfC/+xozUQNj3hLBc+vijz6QODiXce+ehV60wsp5wxb58hd23wkeFbbsKxkIsmoObNLoGtWA==","shasum":"ba31441bb6c3602d096504e95d7678c0b9589e17","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.94987b64.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0QUCRA9TVsSAnZWagAAXTcP/jNmYWBsI5Nu8H4pOj3t\ndDW4JpSoqesLnr0ryS7SJT0umt/OudFFHCVYZPzfZTVEolpYX+cG/mlBJjCv\nT0m/iFQV/OcZ837WH7Z6Nw0Tj9h3BNpQHTey0slpx1XBn6sf5dWOKeomtcZK\nLAsrt85NkFavyy/+knSuKi/WNiVFcyS7bee+xwoFI8H91EE3jq9YJprWx7bV\ndbRPHrIPQu2cPflOo9ENE5j9arZDELdl5NxPi3PQt2Y47Lu3mC9KaC1+MLUM\n3kutsavuO26BrsEdoT7K3U4ZfIL2I41mABnYnzrW5YU3IVTPIbKczZxBlrc8\nfugOgkMWvWDibDHqilJqeJMMnSjnVL4ZmVWgnVjN5KX1u2171rN+so/975he\nBVNwVkpiO10JHiVGdxHgRKsNejf3Nhs17PGmLQGeBQrqQ+g08KZMFxRltZu/\n4mY0FWmyMLQnoGSHMwNS036pi95lmcG7nCHvYOVlhWE5lkRS5TnqtoIniSu6\nQjNcqvnszuWa0h+ckX4x+LiDFs9H1lJXrODADIX48au3d9m1XLOwT9BXvols\nolHlFqiX9gWkMcSDoWl1Ve+84zngF0oZKld4R3Fok39GQMZFc4+oFgV9NRpB\nj7EGHaIkkhVul9ui0rrZFkJelXLc1CdG0JGRjJzr4qhlmv6bCx3r9aoFrw87\nicg+\r\n=ZPrn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICFu7OVb13t4dNN8/FhbW3R9AuaY1LjeRf5YBDzLUDwWAiAb7ZXiIW6mkP1ou7otMZECXlpPc4pa0Q1tuJypf0eiHA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.94987b64.0_1595622420212_0.3700489502648554"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ff49b7e2.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.ff49b7e2.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.ac405eae1.0","@material/menu-surface":"=8.0.0-canary.ac405eae1.0","@material/mwc-base":"0.18.0-canary.ff49b7e2.0","@material/mwc-list":"0.18.0-canary.ff49b7e2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.ac405eae1.0"},"publishConfig":{"access":"public"},"gitHead":"dfb6845469ead87e451744df01007d8532a7a5ad","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.ff49b7e2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-pgfddqiMRQRi5/O5Pe0Oc60O2KV8JQtAMddil9uhEPXqPexr+IKEKo+tNUM5NBjrmheI6I8rlD0lK9hggNTgRg==","shasum":"0a7155116e72f7e5d6f0f95a94c149ced16e17ef","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.ff49b7e2.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHyVxCRA9TVsSAnZWagAAL5kP/j6Fy5dPLj//0u5vwh37\n4TjSxCuZU/0pyReCQ/ctny00mSpAwlvBlKOVEeVg+V+0Ke5QxgA0WUKwc0nH\naks8P+5yzz64mtSjc021OGbA/fPI+qj3Mu296OROlJV4ib0wyYPwDpcWemAZ\nqvWfMERrIStMFQB+QLinTV+5exulCCsdS8SEJxeX1pxCAnSzD1vpZxJ6Iwpa\nJtiCdw50LYo+cP0cIXoPZcYtFMDpbVi/ZQhaCPkIKW/yqRvIEXHhQFlMN4Dq\nl9Zy5OzMUGZD5u97QokNK25WiJGDHao3PP4nh6tocp7aLSUz87p6jkW5jtAK\nRK781B3V8AgvZg4HQMovbuHZlux3StMoloWqDOumz/cb1s3v3Li5YHoL+JLU\nrqZUHm9oVVDfa6/DVWemv4iRwlNWWkvGuNDpkZrT4M39wbJBzY1k9IsmW/7w\nGq6neFWXFarQJX6UigM45wEgf34X05xm3gRUCPq+DULyeKQbVZGJomsPb8qo\n8Dc9NbdvnrB1AFd50Pr/tocUInw7omydn2/rKzHnAglGLSuoZ5+lnxR1p2kh\nKmBVn+R3gQEdcWJgdTGMKMNZNpMh+312jd521bOR8c/V83rzTQw9m3GEUHjh\njr/0+L3JdOv4W3J/fpfCqWyVI2ClLWnhVvyuSFsHt5E3SRykvzU8YcY8/5xr\nyqjj\r\n=4rdK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+2fZb2DgWDB5rExiqIbL8QHU/83gyZH0XCCIpMjBPDgIhAKAsaXmqRknnG1vJUENXAeXKRFdJGIqJNpkqWmqKPhlB"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.ff49b7e2.0_1595876721150_0.15743374562487977"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3d334ccc.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.3d334ccc.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.ac405eae1.0","@material/menu-surface":"=8.0.0-canary.ac405eae1.0","@material/mwc-base":"0.18.0-canary.3d334ccc.0","@material/mwc-list":"0.18.0-canary.3d334ccc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.ac405eae1.0"},"publishConfig":{"access":"public"},"gitHead":"620788b72968e56f9d028ba5ef2ee7d1b4a91488","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.3d334ccc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Eb6o0R0Rf+gJiFbe01JwQtzgAkyFod24vIooXvw5HoltWQOSaA0rNi27OGFvdm1W5+MwfxwLbExPbM8/MDp1Ig==","shasum":"861a32715afbcaf40a29e0da9d0f97c3ed9ae99c","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.3d334ccc.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIE8vCRA9TVsSAnZWagAAOf0P/RW6wLlzca3Tu0POgWt5\n2yi/kYFohq1LX4EDHYQtIXjErYdc+g1wobos8zyKxYKya2MVNwrX5ys2o6eG\nP6Ihm2b+kSsA+WHlqpA/PNOhrdhCpYDu8dua3sDAF0dRkLO7BNqDKS2HsNO5\n1QUlwsqehGzKmhvtNOV5oQs4EXnuMvXDlTd1AegsTcQy3bU9CixXsWiokkUk\n9Yj35Tkw9Tb7wNvygrIxtUhcZRAUgbmt0QZcjAxIAo0+ACahArFoOabPKrdR\nykbX8aguV4WTbmnQIbhsq5KK0kfjjJfsHoRiIUmyVrDoOSCbh6KH5DC7GQoD\nbeGLn6al+kMan2mr9OQ1FfIIa43gSC/sRftwows9QgCjTShh/Os4LsikhICV\nqXuxUChlPEQ/SvFE4JyeI3iIrxwMWWtv/vFglVSbS4wt0WWEzrFeqNlPuKLd\new+hn7DGaAH1yUH3qbfmxzFdU7W/2xBf6LLvu55hqc0DMBLedqMtcABjystx\nWzqoszlXQ0dUGDbaoIQUKLXd7F2ORjgEc98t/0obphrHjin7t+LS1iQhJdAV\nCV4rJ7B2b5J9uBaOp4tco/32tm0kj7HNbRomVcwqdvmCFbKXdSWLUIAhfZ4E\nwkM6TYlPiGPL3/Y46WiP6zf8ZH7XAPHJAOYSJlAz1ddMjq3qDrm3Q9WU3uro\nGNW+\r\n=NsUf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEEl12+udW55ZDwfKqqUEHx0rKPE/9VAPnoeJd1o2j47AiEAni+acbj9e9mfJs0LN6SJ2S/0ucPc2iG1rqTdQe4Sigo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.3d334ccc.0_1595952943253_0.3370609420758268"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.82ac569e.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.82ac569e.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.f86f83f54.0","@material/menu-surface":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.82ac569e.0","@material/mwc-list":"0.18.0-canary.82ac569e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"0082732bc61fddf6b3c8f7d114839f1937e7d1e3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.82ac569e.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-bFcot1YIzrw+RmygZJb0cKSqp7xMQya6d2qgS4a0BhZeJQYvTjNBRuvLeZzIZ3TP5oW2cidqC6LLD8OSJbBDBg==","shasum":"360dfa180dfe10415b3c3c36282f25d42ab0c8c4","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.82ac569e.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIHGvCRA9TVsSAnZWagAAiOMQAJehp/CCRrrg1bqunOLk\nfwYwHnJZqao8z2IkxY/wOo3a+oXJLKW5rJQS8bNqbdEU0nAwKa+waUvA/dSO\nNVTdig17ycHqTHt799LFb7K6znLM2dlKenf/0EW3z/WSsVRAlUE6mxcNAm4w\nJ2S0Rbq3K5VLd6XPIIq23AAhIEnsp0Ro5XKglmKeR7sNOiaYGHpZKHR3FoCs\nldI0kxfTjnl/9JwLXKSzinyypGrxDp2M5sWLyel65zixkOpm4upKv78blGVY\ndNtF34xmLK+n7DlOlrZewHCXEYWjDS+jNI4zr1fpkn7wToRNEwpAVmwJ7Nna\np1pfDT7/Bh2+3p/v7maVNGSnMNAJEd5xb1pbMtv/CivvPn7VFiyZ4QIKkL67\nvVESJi+cAILR8neTfU0AHWGlFLRrxqbg5L8Ls6nwxUDYImNnzDZ5FaViNiOm\nFMgAREX3SXAEHqSLP8HVj2RLCL6ZcKV+O6EbVC2RU8p/RwWP4NuIjHZ1+xc6\nd2h7Gb4JIxmYBSefydCeq17d3PDgvLoyt/Ohbc/ZihnS6hfQAsGxcOkmpjDl\nusGmbdB56hbTHmWq5e/LUXxuL92OLjOZzQ/wO6iFGciHq1UB7NrZ1KMvfDEy\njrhEZovYuZnY2nQRRuUn/tcclxY94CTkT8oBXwJp9/Dgs4LSOYYLPqqgHJXJ\nbqRW\r\n=Mh5i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0WqQJuajSeis7NFgdc5+fwBiwbs2E90vBqwmKnFcf7QIgERLFSPL9h3aBFCzGw1HkpgFTlJyZkLMsvrX2EfkQ6LU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.82ac569e.0_1595961774685_0.3777078105779239"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.99df7397.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.99df7397.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.f86f83f54.0","@material/menu-surface":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.99df7397.0","@material/mwc-list":"0.18.0-canary.99df7397.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"e236d384d23fb84c6f0db97495a598e8b374ef26","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.99df7397.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-9bvWY8Md6yxEgv1mchh2MlGLW6K8FmAaf8iItnPg4uGWJ6remIOn5glNsD9SE36WjpF7wz9EbhQnrWF3OIrObg==","shasum":"723aaeef68eb863a3dcdf8f8313fff41fae85be7","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.99df7397.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIOG/CRA9TVsSAnZWagAAaXMP+wR7OU5rdYCZyc4HNTFk\nSmOzd/WTuRPvIBrPgY/l8iI7oGouFU5fsD4RGy4E4NI7DfBp0mCa5FOtbVjR\n8jTL7FkRthR2jUmT6ooJLwdKO8GJax7xB66hR25lJMg0d5+AAWCSSlh6Qcwh\nAfHNNC20QJqyxLuD+pj9NgkpTINELNKTsnNTMxOnmRfKeDKhzznLAWVFaqBS\na2o19jfJVN4BYvvGOAgcxA+Aqr0SLNH7zbf2AHEcJKGbnFtP6EpopHGVFobT\ntM1MebTEqSEmYkXCnjIsA9ubBiYpdk5vebE4GvdKwuBii/jPXGyXhBmcAbO1\nfltWOiTntRWT9R6hyzrhPsb4FwugoKki+bpEu3fdbBA3wtpdWFzHOh0rQsRG\nap9WvNmYTBro+6pcT6Sl/wAErX8e8YtM4AY3z8h7L1F5tML/pXJAITiFlk7h\nvy7kLNBE6+MLr9aEbubqhGPoIdVLF5oTd4sxYITfFSU1FLkOJaOkAd24Hqdx\nMgMbpDGRSq9eizqqvH6tT/b6d9jva+TbGt4W1x4LehiQO3G89BWH197+jpyv\nSvB6kE5T8Yhgom1uqcU0Xgy4B7FxT4SqEhTuc5f4atX+eLin+I9LTTm3Pp86\nH1FaVSfMSAPvR5bHiNxj357CL+d0r3gcI9x6oWqag0CRFJsut0iccXsbkBer\n/qnX\r\n=DkUU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFJDjNJtbl9jG8pPHIK8tcIcPH/KWPOredknir1QeuwAAiBzCcwV7twM+l+000VVvDZL7iZwyzeKEChWNJDRetRtHg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.99df7397.0_1595990463404_0.7466414975447029"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.45493e05.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.45493e05.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.f86f83f54.0","@material/menu-surface":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.45493e05.0","@material/mwc-list":"0.18.0-canary.45493e05.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"8423dd01198986c553ae23227667bc8148bb4276","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.45493e05.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-7TIcRB5jZY7fryhpXChyYk8kVoVjygN15Ykw5i3+h31WMolCK648017DIjDrY4qLdq3hEowEcakOslks3/dM0A==","shasum":"f695f336e7df70b236f1d306b43ffdfa0d4b1414","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.45493e05.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa8SCRA9TVsSAnZWagAAfUoP/0s0H7A8L2QfpyEaIzqr\neKWueHYofg0/HsA3zBYlixKfQrNntaVjTB6+QhkOdTS0gEEfpkG3MFvDrbcc\nVOUPgYjAjA5ALROmAjGDoSF5zBTsN2S4l3VrAI3RjVk7tppqIuBR1ngGMTlf\nMDFA2iM7GfYMU1LJVFd+RXgndL/REQrC9irS3RpY9AU587sb8ltNIBOsKHOb\nOSFPDymOzU49xBSO603U4wxsIT3PtQtJBqw/HOI8SamxdkW4UyMlFgDOsMnD\n2GCHrM+jg0FEJC6koCxixc9dLfUGlTcmlZ6i1tDYoCbp2RBhLlidPFnA9g3W\nfxrWZ4Mw1oeNHTPEBKNa6MF8RzAzVgx55U1W8+bQQxUVZo4Fv5axs5KDc9xY\nLTtguONDc59yH9gdZbGyim7ooz0KbXw526NC+kPgVjyxD/UoHSOoy5SU6HMK\n0CxK1DNZ+M4NuN2D3OlYcOpHhZZoCVSTJLR2OP/Ri25+OCSjRq34/62vVP5O\nClkuPuSykARaOuJhG59WumRJApBnYTDR/EDAd+jeH/4SY4XK8/plogwIgOaH\n0r0zjkMIv197H1skGUA5fBwYUQRcYR1SW1m2hK81GtnKKpexhJ53beVaVKeV\nNMuPO+lDTBciPNTbJ+uvXQZbEo9PvlWEjzprQ9gGQCxk8ApuRs+Ug0q2xtjW\nrjJW\r\n=Iklf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGUQmlAXjAWqKzolkMlT6+5YnDlB8bgbxCT0jNkNlXHyAiEA+ebJyLgT0yqUsK8QPhX8aCAuHcG2BkYQLYn0jSW9yyg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.45493e05.0_1596043026501_0.369702011151787"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f2ab0a95.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.f2ab0a95.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.f86f83f54.0","@material/menu-surface":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.f2ab0a95.0","@material/mwc-list":"0.18.0-canary.f2ab0a95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"1009e1c7d365921dcbc3071cabaa20c5e21e65e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.f2ab0a95.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-s5MLkL6z2Qpua0iI90xXbRjsjwIsvsh3MaUSwRpWYcmeNOuAn+2gdEZbDbstYwoOmvyt04FXVWk5Bzcz9lY2Ag==","shasum":"8f4df587c7ca28aebcab7b45a963ae7d1b6f3059","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.f2ab0a95.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIbA/CRA9TVsSAnZWagAA3MUP/irGgCk/2e0vWZUu+OSy\ng+PnUAi5JJCFJeOLsgyqnbxzMbDd2HO7aqbhRe0vRFm4j3AYGTHc8hc5Z1yp\n4sprNOv+jPQc4w4x60b9pyVpwZEvamTLO+ifSWaFj+A7/BLDFloq7+lJ0k9/\nQBy3qKyDecaRvlbWs92JmYw+xG6XipWLnP+MT6kwh6bzCZdrpl1+iSTeTXG2\n6wbTIqTla3mXSUT+0beq0ac/Qq3SPS6cFsPRXwcGGD1PAxHZdcrSYXmYAJ3p\nYt+ewFO4Hs25Y9LHo+/dHql6QmoVgDkumacNeHUMS9D7XLX2ELAmHNcHX8bC\n7k+2NYBdBHMPetp9eguxRzDNabmA1tJsV9mNxJR5TGl4vuA8PTS4gZ05MphJ\nb1ENn6OtHc8eKKaE05gMUJ0fuNlzgsGfNgCv1YkP58bX46PMF/LUOoxq8Yeo\nmRpOw7HCBwrUFIB6o4ZKU45hY021SXMSl/YDtu7Oyft3h8mr3YM9eopSyySH\nlrccIJLh31JeNcU1W8vYhin277I6ttD49MNj1xbvAhRAQlzgA0AX74eM1rrx\nM0qazMKTVvhBiSs89L2hqDk3QhPR6zNmAOIjwddLF4g2kwK+TtoQgc01jGRO\nQm4nanMUQ4xA5b7ahvs+QU3GZEI0i8RfD4AsG6w7icibgVkLA4SK79FUTUYQ\nuioQ\r\n=f4Ls\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdprKPBZ0nnJIrZ+C0CUXgKyAGOftXBzjPq6zCZ2HKDgIhAIqvmBMEl3zZg0QyLsU3OPJ3EqtYHd09I1fq9bMbWWUO"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.f2ab0a95.0_1596043326122_0.3464859183095548"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.45f9eddc.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.45f9eddc.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.f86f83f54.0","@material/menu-surface":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.45f9eddc.0","@material/mwc-list":"0.18.0-canary.45f9eddc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"1cb46e993882c87c3cced22481410b4922c1e1cc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.45f9eddc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-sMeDC2qDBKUX4RBX2thds8TTTFInFUu7ypUEXshaLGGW4ylCuY86O589V+Uf+33F1jxpzpB6E0WH5vQT443Qxg==","shasum":"7cd7e278dccbf9a1bb3693c5b252e358b49c302d","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.45f9eddc.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhp4CRA9TVsSAnZWagAAsZMP/i4sKaIwnmDVg4Y3qMVk\nYG5cyq7AzLDOkIoHkdy8QU2CPyf7RwCdQXATB5QTBUCiAu7o5FAsU7mouihS\niCwHTqUXA6H6d5hO0jCFRWRm/LHVEiBNbnKF5GSNryR9rU8AG0P+qRLbaRof\naT+ZUlKXMk9GkQlm7Klgm4CFNMpkkp1kMDEUr6nftyQy2u/Cb6Bto/JIceUh\nK6FjBZ8m/8XotghmY7rI2hxiPII5pGAWpXLngjFGwHNCsSZMXahlEu9bG3qU\nENP/6weQC7pvuo4IIG08ah8/kZydhmh3Usbw01kSgKsjbfqyza1zSdNRFhib\nn4bp2wIIzMryVdEhhR0z/pGPO7jgfx3bO2orWei4rzPwMmKYZgZQsd+LIYeV\n4xTICR/DBI5wNaEUaVFQ4B612pXhsQQFGz8vCz1w/Cl7Pbu7AWL7gdjvE5SD\ng1b2cvEue1R6TTjfeT8IVKVBIQMJgzBlP2+UpnwRN6TbFPreGOJK5anZgljg\n53tbFZDjfFFndXvlYthlF+NBcvRG6McvmA9jAZnWKajV5ZtpUaKgKPvkusoj\nWefS4wpoKtt1N1uSWZ/HiqiT2TPYSj+iHrY8eNuV8YMEwfwKcALbhkOxFnmc\noWBdiR3aCuoW6BAq8aJyxKacnGBFAVpyBWdnZBgt9q0vmKItAYHOhoeRRhMb\n0FQ5\r\n=Zf7z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPmCmBAa9BYu4szsKq3a8fcOAlnr3rxv/10J/dk3r5PQIgWZvrCFBVKgbVfewsrk+McLU4B0OVPDGpauzeNGtJFxk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.45f9eddc.0_1596070519621_0.16427547281639976"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b64663ea.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.b64663ea.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.f86f83f54.0","@material/menu-surface":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.b64663ea.0","@material/mwc-list":"0.18.0-canary.b64663ea.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"18456f1bd35a7bed64d6ca9d3d408d9d62d59c90","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.b64663ea.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-4oiV/rGhPLev0iU0MY0xZOnR2m0y6q+RZtO9OSbH6ke6KEyXUqf6+u38xu+t7DlBBfjv2zb7aAUXMlP2lFiIcg==","shasum":"3d182e831117881209e29e82d99e34881c0ab5b1","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.b64663ea.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwbRCRA9TVsSAnZWagAAfR0P/3uILNfrsXf7/R1YB7Re\nQwB9HjHSzyhxChzBrTEMw4qW6SxZZDwb6Q9uCZ9DXL81piH3khDK83GHbPYy\n1hLqTEItZl1v/I0ixqXhY8BvOAyW1xjqS2ECN5+z10fN7bnSjL2SkFnNvP2p\nqlocm8y5rio0gIvT8xbpZgMJ9+p8m2LbNbxWkb0BrHNlLpTQ7eGCYRT/3xpD\nI1ER5GBKjvOA0w0RC+vkI5xn5kVqJ1ArTkrKOvDqhxKnHjuz/1+MdOaXTKJB\nfFgyMliB0YiCN2M3wUI8miMkeJtnC/u60IJB7HPPYbQc2H0igssEbCX5y0En\n7edHUaMt3O/DAwBZtwpRctXdVxM+WAj+ygvg/7YZBPx0D++RMJVpqwNGUGDc\nhJbM2HD6nN+Vv779lCNEXjd1Vu7Sp/iz+aohBMBYXvpEnuo28ImDP25HkiC2\n00s4ySlyD2vWFuvPODcyaI93YhmHfrCkGkwH4LTTOB3Rn+LpMZpcatLAFlLC\n+5LwP/Wd4YQC1aot9bUZTpGkRFTUkG+hxtoNoAkPcKBCHcjivzMrYI9lZWIU\ngy3Pbm1J6MxKbW0SMqr5cjO+kqXegP/Eiu3vvAHXHEEb6d9wSen0Zdgid8VB\nTEL6ewtY60L7pXTZ23MHGOm9RB8U7sYMxZt/i4uBm2dco3h0VYa9KlYLcLRP\nWFsm\r\n=/bh+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6bZOC5MHdS+j6nWiEo4x13kK5SRbw/QUZD6NLfKvh1gIhAPnq6og2ZM17LYfH8cODpV1O6EcMaNg4i5GfAdLwrGXf"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.b64663ea.0_1596131024664_0.14158070697582303"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.9a1a4d2d.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.9a1a4d2d.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.f86f83f54.0","@material/menu-surface":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.9a1a4d2d.0","@material/mwc-list":"0.18.0-canary.9a1a4d2d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.9a1a4d2d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-hHos0dMT8GqU6Ca41NiJspy6SflN/iBF0qNCpybdei/cXGb2ih9JdGXDDzPUQzUD8LoQZOZ5NKHmX/oACuNLEA==","shasum":"3fc4f4264a188a24d25ed6e0ad9ab867883f58c6","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.9a1a4d2d.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIzXyCRA9TVsSAnZWagAA46EP/RXSUCwKrdgIEHKsIk9E\n30YLQOOgEfeIVDEjrC+eeEl1okJB/0pqrA6ApcBA1gNRnD7VQiYfBBhyCqZq\n3w/cmCR4Kke3B8t7Or+lu39y1YucWA+5RUUWon+NaZDXLO9VNFfh+8FE8pi/\nQKGZqNmmE0TUuTWr2LEYq4Lf7ZYl5TIo0rsE7decgwonBoGamVy9GsFTrMHw\nJz1yGWRk/OCmxTD55xu5zH6ggg5qi7u2DgdEj6+UR491HQCSn3PBhJxIU8cm\nK6WDeU/HclDfnt69yGYnfjRxtf6v2zQtX+ExqmYX9s0bLFPFffW3iHGjkspJ\n1YCVylwL6CZAuq6NuaEKp+WmAajmOJvb9+l4LzxFgMG3z+eLr3Qly+szGJ49\n1Ql2YKRT2wgpXnsrUTVZvBrZZg+VbOiXJEgKy/rUvU75daZ4bhH0YadJzvl0\nTp51493JtlotKNwUTu809ME2BxK61GLR1KbYhZvekIPWO1kxmRaD7QQVfe8Q\nSTY6QPXX+dyNl08pwuCYn667C9F1iFMFDtC6Fl0Zr4zyh8/8imwC4JjmKKsY\nwlrrJt37bAG1I5ti7Zv/xXuSWBke/Re5V4mftStsLZoPjz/jCem3SEjCg8B1\n+tRyhIqa6NmieNIoV/u4dV29yF8Td/v9rvIiaNYW/PycAUv7XxEkPgH5r8UW\nuJ4t\r\n=lTwM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDW3nMpvFCoYH8CcdO1YemQHDrnXHWIcbV27A0X4gZJwAIhAJhc64wa4vwIbcgbF0LMgBBHr6xgVGRg7RVe+pJXJh3p"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.9a1a4d2d.0_1596143089891_0.9722298688113413"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.887c2848.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.887c2848.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.74839da7b.0","@material/menu-surface":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.887c2848.0","@material/mwc-list":"0.18.0-canary.887c2848.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"2da757768e8d58aa4885027c78c58f8515382305","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.887c2848.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-RxbMPz3DdCvuMopjVPFhfCN9KWiHBt9XY797WfZgkeJSVLH6UQCGM+2I1hsBeEAhbTlsciatzqBcdpLv3BWFsQ==","shasum":"2ceabe67a513479e59a56d7b1b62fda60d18fff5","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.887c2848.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI0RSCRA9TVsSAnZWagAAmdEP/RCiAuh+og690CDI1Vu0\n22TPkuHitILSlZ60G+Su+KuZOk04CBxKiyO5b97+m3MKddiMczS8MSi/98uy\noVInpnHMm6dTxUx3z7eLVzM7+/5UlyjweWKckzWtEhK27Q0i1GOchtyHbLVp\no8uSNbGlKe+Widgxw+1JCc4Nqnpo/tuAt24BiGNghjvE2ADwZs7Z67y3/rbS\n7PMyfRZM3rc7YIrqr85jCkwqVqgMq2jMWT/GvqbPgNkvciKdDkf3M788FEH2\npY/vMA50tai0i1Qos7qzn+4D/IUVABTyX89Hved4WRI1FsJQJH+6gWt5wu9T\nA5Mh/Mm1QodkjmV3vmKdwpdMUwn34dW4zCYl0QabkFGeKFzkbcXPa/PxfscU\nRezQHuQ0fCqWJBaOllwW97tD1JnTfkkQDayorbNL3J64UCdI7d4fd1D2+H0M\nXfpuEUnn989elI+hRpT2n89dlvmPUOCzjfhSZmwFGDYBLOAXpxmPz5YWuCDI\nd47lhiNUCSenq6Cztwlw8ZhhdD75VSSfC2pTNekZHA6ddRpBMUPRiU+18TnI\nF4aF7CkmRhXeKfoYRPPNSAtXpa9v9YkFrqQdoyMCNsGpOvmhP0zo1/WiIt+G\nW1MEJqOWJwt5YJCbFzEBNtD6pWg26+BbhFYMD9NoxU1kOxGfKgvFANj2ICOj\nOrKT\r\n=/nr3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFBXJk6wiWQ9HoALWxXP+W4HYWn/Me+GPcI+HJ0T5x+8AiAeuZ0MmWg0/opPRC1c8yL88qPZy3V4AGIN/A/Oa1aFFw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.887c2848.0_1596146769503_0.7758423017473195"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.354eb695.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.354eb695.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.74839da7b.0","@material/menu-surface":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.354eb695.0","@material/mwc-list":"0.18.0-canary.354eb695.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"75cc944c1c31dc88606fa2007d002743354e601f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.354eb695.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-0FcXolSsG6ZSqai7bg9+67WTDhj/a9Dl507Sw5RlSUlEGZwHMV5KRMpT1F/lT+NSh+nOZN/fI2AaxxSSJ57T6A==","shasum":"0ef443e388485012bd2bdc574f77a2413ee68900","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.354eb695.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI16fCRA9TVsSAnZWagAAKnUP/A2MCyvdjT62rqJcfYur\n7AxRui8ryGDbcEh5uJMku3RgpXKFqU8JZJpeg6maednm+a8ZwQ1xm6xJK2mR\nQPVcR3YDiS2hxA0SmJ6aJDZhXq8Y1x5jxvls0pzGj/YmXUyJFFxLdBS4lGZh\nfiGfRRMLLfVtcskXhCa1jBXYF0SLoT4fBACRhhav1MPZjoBz1GT4sMkStsus\nVojUFP0RVsuqpE3PNSpe41opUzJVsletJ3xzPWexwAISXRExN0rYImcb7XUa\ntpilMr5/TnGEbIXXyyqYQ8BMaIQk3aa/YsiWcQcRauEjwIpC/oOftkvLan9K\nNrQPPa3mh9V8MakCDkwL/KcCRR3u9Z/NMszn+WGxSez9tqbwgymyrXIcEkDL\nwSAND4zNGqf2U8TYs8jd+hZy7u8WK98m8FwV+lpBGwWkWnv2Cfj9DwxdASNS\nMhYCO2jd+fLn9oUA3ZlkgXXd+q+Wxw2NLb6oIF/is+NhTHAil3d8MM919WGM\nNoaVlg9XTQ14A1ux0kr0DLS+Jfmxl9fhwMJfN3bbJTiGGGSaUdgbXZV9KCoQ\nHsUZPp73ZFm07vRU5A+qtKQdeacklOplOfBxFrpnh7Nr7XfRrcMxGNOTXd8F\nsj5hJz4KhSjiNFtmcczN+e22EUZHi9gwGRZs93q2nB5LSZDHKOLKpTRYYvo4\nk5AK\r\n=hymD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCydGsYIdGgp/ofjUwLr1yObft1fCWVmpITEIbPCrL+LwIhAMXYbw5UWyCevl4+chrV1JxkW9Y7J/kBgUiS5p6gbblV"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.354eb695.0_1596153503273_0.9641969413541023"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.7beb236c.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.7beb236c.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.74839da7b.0","@material/menu-surface":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.7beb236c.0","@material/mwc-list":"0.18.0-canary.7beb236c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"9cb1508b49b8ccba6072341f23bae1ac67078621","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.7beb236c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-j9Za7OzN9Yp6BnXgWDPIbU/BCseQHwkeBlYmaCBihtpgQcBid5jFh9J992bhDK5dUBkGvG8Vnu13T5GZ2OZQpA==","shasum":"1d9509f8f7400422f3d6b1454104b81bf910592b","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.7beb236c.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFevCRA9TVsSAnZWagAA7M0P/ifrXC+JfajoTuBT4UzQ\nRQm3bXrY3p0OHITAih+6AmZuY6bH+EYBHpT/V7E2bcXGxGvd7Wbcnvx3FDQz\nb405AOsfPgzC/lF9UvashtCRTez3mTSwINFSoTa7a6CoEs25bS024d42tuKO\nGll6BNsThuMSI87jS3QygyHQqrdm/l1ue4oJcLqKsSUvBzqjxYFdo+Qrw/Db\nRid+2Vytdm6RV6eq9lkot03XZN5fwYzBT8H2W07JwNLvEfU1F6kRPoUIXU2p\n0GtT7GW7HtkXOU3IShb7uM9NWIqBYZ3eE90Rf0lvVRviWKZUtf94LQtnW3Nv\nJPR03f0LDJZWjmKE9ROY65zVzkj1AS5Id9wbr5NfWHtcwGkT28vemH8exb9S\nrN/UE3ABGeO/5A/jMgnqA7XZoZAGbDR1/DtAMmfDVTCJoze9UQexXkIWAPxi\nToFqrFlppGNI5Pto6Cnu7gbKcvF/fvxdvChaIYiIq5whrTqUfXZq96AgLuOx\nFiFbmd+gjmJMwgxiuca1AwzJ6uC90yfboB9OVXs61cZaTyp4h77PwmwVVwId\n1lTRq4WZrWM+yrAUdq/ZjI5TTTm8Sv4QCbAi+wwE9I/gLHHc6HgHfThaorON\nMJaVfjM5M+c+1QETLR3wINBi4osoQsT3s3KxIUZODJbO4KJKJ/jAIyeK1l8E\nx9Ik\r\n=MocT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAwEuwyVKlUbJUCDdBIe9lU5DSoRgSMhBSEjnIOHKawTAiEAneidJSVFcjVUesLKkmV4XbnkrdGfHmgnZYBvgmaH5Wk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.7beb236c.0_1596217263316_0.2587426297423856"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.c44acc0c.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.c44acc0c.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.74839da7b.0","@material/menu-surface":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.c44acc0c.0","@material/mwc-list":"0.18.0-canary.c44acc0c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"2491ff018c9a71195a5e873fa60b912085ec84d3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.c44acc0c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-AepnDaie3aYApKLyzyRDV3V+BHfUhbUUcSnR8G1yvQSKH0jCbuDuszdVOUhSiyVwZzpk+rQ38he57rvXPWAuyw==","shasum":"8efa87489ea177757af3297fb8cb207cffa022d1","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.c44acc0c.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJIkOCRA9TVsSAnZWagAA5nMP/3de0HzFXbm2Kk56gN30\nKkpuMPeL54nMThRYFr1dhDMsaY++QAnqhhgMJ9oxIVmwuMSE+GNo1mw5wISH\nHK/7AfqzJgomWTtDSTaIzZ+9rR610sjpB8ubeO78hcX1d8Rp3DJ36T/txhyz\nQndWqXK9/T0LP3UNrQuCMRp8wmqoP/xfH0bDI84MB7bki7eRlQ3ChrjCC9vI\nSmiGfIYSDRPlBr1bjtx7qs5zS9kQd3cPaF3g0gLQMCnVFfLs3IEVq+GVrZE2\n8aeGUiAiaBRJkI22ONERISFKhwsoZDN8n9o2Ji9nHCzR/de4G1ksBevazPd2\nwR3KGo+gPQuGvDvfNLHjxqEHuROJzqVO0C1iyyRjK3NX9LeiwLcsQFngkTzJ\nDy8C3lm0m+H0oOWZ/5b52KmFxakLZ8M7sAzw8LWKeQEJrtFUqHNBTn6JYkvW\nAzPwdX3uhpAQKzwsy6zUSaBw6gGL7ib1rKGaLLQAfXOgBiUC4cAAcTotLuvd\nJvrg8ZNTloIGHIuD06NwHxeEvytFvJBOjO2MMTVQDUFHrP2hKBGnzP90g6PX\nIcEERCDVkJwwQajodOqiZNOb+8VPFtAPdpO/nYpXkQRSMUaSoPlk8o/QFQJ0\nV/oxq7oBTe/krwX13WzJzs81n7NiEBnjLSsXcCuInMGNOfLbuJzxsuFosA7b\nNe0R\r\n=m1hm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOnEMu8TN4QpqMey/z9YY0z6Mw50SnkOfTDpxwQIqr1gIgWzk5ehmU10ir6f+rR7d8oUKQdqbu5Qmbgh8BOYJR4Rw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.c44acc0c.0_1596229902087_0.1316689039046901"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.779853ff.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.779853ff.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.74839da7b.0","@material/menu-surface":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.779853ff.0","@material/mwc-list":"0.18.0-canary.779853ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"e06c13898d0c9fdc7cd494c68586a55eddd2d483","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.779853ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-VK3WofFcy4ReTlNTbrUkCKXKhBYMVOYD2+iD4hwSRlhXmi4N0Sp50eB5PYd74KhHA8PapjBCGlF05wIBmJ8HGQ==","shasum":"1c62cdce460fc30302e58a1abd3aa4ddd89bcbea","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.779853ff.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKEg/CRA9TVsSAnZWagAAcUEQAILpxKESKfjKCm6XxmDc\nREEsER+XsHsRtns69pLKpX12h5bYKu0zka9TVKVEhzD7MqVSHoZ174mD7kSa\n6y3XhXBNNJ4Kel+KIS3SYs9gtjDiRxnFbgX0MOkhU9vYzXX8DeVNVPUYRPtz\nddIZJsoxsK5ZHjinKWt9T+3jsoyqikpdqsFqqVWXmwNiWeTv41/7TlKrcbDq\nvlJFfNZpexbLTHdWdGxSC7e1/7nlZJZ5/9YDPsBB/+VX8yk79Fi67x+wavLT\nLS+dlA+TItMRpDxQQ7u+i1IRSSIRJNiMJpsR1e5adWLkqn0ZrB3+XHKLkGsV\nNFmy4RDg3p7qAKM3wPVfGktM0ej+fC0maG0SoFn7gMcxdpNirP4m6t5mkkz6\n8M3Q9EeH6kuKjTWb+F2bZcHXoGodqcg7hydrmh4teRxitSkKM/hL913F2hVl\nHspXPwwSNGi0h5vkO1ChqUR4e26xWEqaS4dcwKuISOY93SJt0aEPu/+a2Lth\nZVGnSvfw3VQAcjcrB+zjxPsLt47uBqqxoXtvV7NDdtGxgKx1KyZcvcL0ymJG\ndUobzOSI1ua7TMCJArmXgQNnaxMVZuQOPHtvhJKvI95llVj4upvMDe3zRp4Z\n+WOpBB965/wKmxGLiJr35Cjy5xjFccH9NBvXZgyRKh61bBlPrbR9SdvhXyyc\nO1Gt\r\n=jns1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5zltWLKsLABXRH6DWF3oIpxFFaTR+/D8jTukcBJO2cQIgKoydVyuduLiMvHWiSc8JM7id6rU0mzkkiJjT6lNdYDY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.779853ff.0_1596475454873_0.8882755871528836"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.8aaf270b.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.8aaf270b.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.74839da7b.0","@material/menu-surface":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.8aaf270b.0","@material/mwc-list":"0.18.0-canary.8aaf270b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"e119651cfd9ab60def67a36255b4ea0ca1022d37","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.8aaf270b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-7UkmsGGXIQdvL9+CEGCsvECsc9L1SatM1g++Pfxi3HpbFbuKE2yMigjhAYbcyMRsJiQMqh+LRtet/Ei6bz539Q==","shasum":"94ea8cb8d6c9a9315a5f9bde0f3f52dcbe03d914","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.8aaf270b.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKFpPCRA9TVsSAnZWagAARpwP/A4/ckD/zQGLpaTJTNfV\n5tipAze+8ryUl0fmQ3y/wfE1fowA1uohZleI1jQ6vLSRnENLz9a8HznsuIlw\n7ZQkWi2148YIHcA9pm3fButBFflVXVuaa8VSSsxsO3O1Ut4dvn6mO1qQGtfD\naRCisqH9Rg8DNfJZRj4ar33WUc20Wt29187/z2//wh2kT+mgpPGTuGbqsEnt\n3txVbVmyWqSREjYqmob/K18LwRkqudA6GrJk3E54C4o9XDVRHRpdKhOH00/Z\nuZ5UG0dcEyp/D+x4nIE76KABKjfWtFZDGA9f2V2I09Vf32iutt/QSt3T+9Fo\n0HNs3s7pcwNtiHhs2BpMVabvuG3mTdW2DyBfYv5PE4blRN2VfHJz8dtDzoEb\naa5k2drgywSiHdGMeBQ5vjC9lHfTM67Jdl2JgQZro15D5xoKBJFC8wqxoO4r\nW7mAPAb3CKpDtEH8U21afShrE0uF16o15FQT+Cd9M60rGSMIWJHigugVjknu\n+faLM8YVX9T/TeO6MPMFcWx9YOvSIxsPjVdzcwiVp3uYO93RkYACAYcwT4Oq\n/QlLJ7Lbg8d79DnYLW4TKJ1+yjUQqd5V/qX2gRpmyL9n1U74TfGUw6NrNIUb\nht9gMoIK+CLhNf6HxQ7gR7rQm9HkYTXuy4XTAayYT/i8qoBFVNFK3gn51QI3\n2tj/\r\n=NA1Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEw/xX0qzgGsPMIcZ+juHV9rfxfMnZhZvA6ktTF42WS4AiAqipmUEGo+7Fq+HrblhxPHcPYBuQ9ithVySIbNXoH0vQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.8aaf270b.0_1596480079312_0.02484998027205676"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.5cde9f12.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.5cde9f12.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.5903d39af.0","@material/menu-surface":"=8.0.0-canary.5903d39af.0","@material/mwc-base":"0.18.0-canary.5cde9f12.0","@material/mwc-list":"0.18.0-canary.5cde9f12.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.5903d39af.0"},"publishConfig":{"access":"public"},"gitHead":"12da43d72184f78a2245a6686a1ebff3e7bb03e7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.5cde9f12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Vlg3D9KwqfOqlgnbC4SoPv2eJyovt8R05I7m76r0iRg9tGc+aM7CcBZ1tnH9FNKR+4CUWfnbbyH7jBYZL5il1g==","shasum":"2a787a5131ed3ad58713ed73674c2db54732b617","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.5cde9f12.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKF8ZCRA9TVsSAnZWagAAdaIQAJx3uNVBDb+i82qG6QMM\nn+m2GeVLw2ORj0gAb9BIDoYb0tS2x1PGzJuWCcDM0/oCQLUkMCquf4qLw7tK\nQjTr8PWgcx8VFAyt5JUKZN0k24pxVHO5fwu+lOqyB7aOnoQBZiemmDy2OwJj\nMZD0S5iYL0ib8em8tm5xMPi0QRUaf3CG37jd6fXWEpyLQqGOWS22QJ/3QXsi\n9hO1Nm0A+HjL+u5EhWRL33Jqci2aof5VF4+cja9s6VGATdFksAvc9p2gnQB5\nJz7BlOjpkoErNIiTtnl9gb4Hny7XLYdabZKQmZhlkpFbkYyvE1gyFZhTGEcz\n2UUc0muGgTNIm8/Ii6fsyW4XXbQVcU/lEERhsTswHCMICnD1psE/XLe/qB00\n8H6nfjWL/NjRDmCGK/Ca5gNNFI8m/J7sF7HqPtznGX4m1ekg5LvrN8Ia2E4t\ne9GpJPzFnUaxJRjGWfM89YIc9hlbLzhyMf4udsm3GYLjmPd25rncfkruEeSg\nYUGUF/HspVij09D7gVqcydKY4WqddN7En+0EwzUAWzn1T6IIpNPaSOJzIqjG\n+GzHfIQ1VSMk20vTCJCbQTOgwstc0YcOAsvp3HulV3TegcGwkp+/uvEWH896\n9Q3VV4gr2vpMV/r+KbI0fc5/DanbSuah9ZIqUjaohV32AHIqThWPYZ/DiywQ\n51iC\r\n=uXD/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHtYKy1fN5StYgn8nDXWTs6pMOwUJskPXHTI8jk9U3aGAiBVPXKAn9rQydelTGgntg5ozifs3aP40+7SWkkXsyPbFA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.5cde9f12.0_1596481304914_0.06226171336007358"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.1607ec53.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.1607ec53.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.096a7a066.0","@material/menu-surface":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.18.0-canary.1607ec53.0","@material/mwc-list":"0.18.0-canary.1607ec53.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"0ed0cf9b8288929f621c044aaed573575e7f23ae","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.1607ec53.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-nVufQsdp9bDBfUsuOa+BqUBs/roIn7Tgtxe1ZSXGXnrWT3DzvHoLYVO9gWEaYIubKDLG9gle6JFntiYWFvwzLw==","shasum":"2681045a61546d47982ba500c08392d0094e1891","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.1607ec53.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGnHCRA9TVsSAnZWagAAMR8P/24GYBFbu44XllY2nyeU\nenq7etCnCtBfTBn9JmgWfWM42pzCna+KP32DPUTgiD0AFlU5X69C/Xx0cu2j\nen29CZIVBkiKRwnyvGpu+DeaVwOCO5PnBqhYbxBI3U9eaY6GdlN16pTmYfjX\nFy9k7KLmn8xNCWP2qMWTzYb43M3yof/X66YPhZcEp7r4lHBhkVOx9dlw+W+g\nA315hTrI2Hi4zhFSAsL7iIqLXo4nVIft/6/01W4u9/ebYEbveUjUYfdOpQG9\nFCbTNOM+WNtCLC+QNldEd4SU4YQ9m1yfNARXhW0M5ZxDUFm4dU/3i9evdEKT\ns8HZdsyKDkFtL3aNdZPdRPirsbvi5swJwmiU+3Ak/BeI6cXzaqlu5evAQEFC\ncVrK7KNqJtwpMg0z4xFLTZEDxVmObhP71QdfcgZujPEfBIoHVszgSNAbfy46\nVd4Nzh2p30g3/1l+F2TSMsUI5ckfEeN9qRfS9/u2Hn8E583hDswcahygi/Ed\naYsp44GWXg+AVgcpCuIBYy6Pnu1RtCMUOBXgQZUOWK/9oOGNf07h4d06Yp9r\n6tVwxYGA+Wo99XNI2ovYmH6TA19sDnFzzpPhKwz6IO3WcVNKvSIm5pFrs+Lm\nu2oe0ZOK8YUF2Nsh+fpQqeOHCButTN6pKvn1dCekYOkFoKugfbeqq5yMqqyE\n8V/3\r\n=DQeA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqJLNJ1KlzuNT548J83dNneFLhrl0tIkC9a9/8ildtoAIhALj1UOxQ/2e2m9PI+jzRtWZvsmB5NvMyBWPDgsw8hJoU"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.1607ec53.0_1596484039221_0.15290108398463187"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.678b30e3.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.678b30e3.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.096a7a066.0","@material/menu-surface":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.18.0-canary.678b30e3.0","@material/mwc-list":"0.18.0-canary.678b30e3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"53d3656f4039bb116e0f771ca0dffc41b500bb59","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.678b30e3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Pi9FnGoc+sWSugzAL9EVW/dq3akolMFY170Zn2isHSyunhIZ5BYPBxrdxXbz/+qayVpbJEZ9SX0bSZ4dplq3fQ==","shasum":"1127b870bb4f091ca985f64f4f99f72dc6b7194d","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.678b30e3.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGquCRA9TVsSAnZWagAAfs4P/RKPo7syDA405eStTBGd\nHoRBtHj9TMdPQ1YOsRaHy0I/92AU2Vo3nX0pyDUrMTzK9hQJ64aNp4kWheBC\nKotuK+vYTi/DKw+fatdIYpRSwmOpATN9otou50RaXWxnll/t+ZvMvLddUiuq\nAFv9lwiuUQlpYajP1DxiBiaEAJQlR5lMnLZAutHZ1bK9KtW5GpqPicP8dVXd\nN1G+pdQ0mvVMfby/jTTpIoGJpKvBw10a2fahsvNJVUg1K2vVY6tEx8c6u3uY\n00UojuqHvFIRWtyuXB+Xq09QX3MzBmWX+d1tJ6f1DfR0d4IHd6JAaWjFounu\nP+78ogOjMWQBmZX3clpNZLNFL7aB//zWLE0qJ13OZmYQl2sbNzpj2HJQXYW/\nK4l1mDcZb/VKRZpeGNPh6XgjgbMu07pyXrt4YlYkmD/YSnOXNyfkmEbjb4kO\nzW0HMUhI67tEG6OXiDGsmJZMqYN02qSBAOxcWKgXFRhrloxxHeYjFq/ofvIm\nCTCZVd2UsntfSaBg7MW8T7CmOYInNLxcAFpeIlrl/+OwTZUXfDvQih3Sq/NA\n7kZOcodx6tRa77PR60/NMOlvsqFXW1q8sNnfJMGELiqQ3UuW5Cn5PgcFn60p\n8dQna9U9CGEgZxhvXu6+dw1KPU6mYpTXqBaMuGTJixpykZh7WEcIocTOjQC2\n8GWP\r\n=DBwJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHf1c+M6NMYDse0QuXIHl4WR0ndeWjs44wow0SkCsxCwIhANVkzEmlonzzKBYQiNiF4YtBvarRGIofwT+IZVgtnIJ5"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.678b30e3.0_1596484270015_0.9795598921854007"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.21c55569.0":{"name":"@material/mwc-menu","version":"0.18.0-canary.21c55569.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.096a7a066.0","@material/menu-surface":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.18.0-canary.21c55569.0","@material/mwc-list":"0.18.0-canary.21c55569.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"65f46b7dbda996fd5cc43abfdb42943515aaca08","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.18.0-canary.21c55569.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-FMDWzJ9cGyX40ZVBK+sMJ6ijnhgasnq0+PLBFeigYKI018vQHgaaGS9ZN9rKoOjTmY33hvTXVFq7GD5g4cS0rg==","shasum":"3a6c73b873010c2d1c98dfbc650a0150713cd0d2","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0-canary.21c55569.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGwiCRA9TVsSAnZWagAAgksQAJm6EYXZ0zBRs8L2W4VT\nTZuO4KhqBWXDSqz4fzdHJw+LzdJC7OeMd679zpmE2gxYoKWATPKai/hZx4D6\nI95WWpB9wfAcZwR/huaeJqSPWutLU0ihS33EsSibCAuXOBkWvnxthlWT3PLN\nCa9In3Q64FqvuEDTZRHeiqks3YQ9qOxrGn+YmJDXU1e4ijbC9JqJkBJOElUC\nRUT6Rh/22xsnPLcd7ZtN2bJ2x1I6kGck33rhnCvnsOnpoNtASq2RoqPUft20\nDhxjK/uwjUTd6mTGzjnjzNdKEf3uVosL1RlLNreaC1tK/dZOSjVRWr5Aevon\ntZ2lSyJQu0TAe5k943vRHq3CBwr3tOE05htxuw2KLE42C3mjgcx2WvRJR3DC\nCQaLlW66zmHunb3oyOPkCJmx6ybqgC8XokAxQkShUnlIEIMcJHi4GN8gmtwu\nwEPWzt5cFZqjQ0IrtX529j8v6/4SdhcuuhAQzz8LpjvsTBfe5uPkjLKz38YL\nqcLfVly8Be8/ZBw+Mrx58LdvVKZzkYzkJp8sXeD4Nn7ji8kCl/cgXAiC+G1d\nhF5+Qxz7847FdIQwrRXgjIAv+EQlB8tqS7PBDAp3aqBZr6XkAXuF5U7vpz8W\nbt+UEQn/aoQXDvnRk09GyNI1srmewqK0dioCDa0S8vcQS76GGAX+PlMkD+rF\nQGuD\r\n=JgrQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFuzd8mJbzvHEtJ6rPtu1nBOuj9OoXHp2mHedXDTKToyAiEA4pDOmXZfwe0MTP3hIxEUqtzRFGYR+D1EoaIlOJfv6G4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0-canary.21c55569.0_1596484642274_0.09616003886715707"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.907d4d7d.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.907d4d7d.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.096a7a066.0","@material/menu-surface":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.19.0-canary.907d4d7d.0","@material/mwc-list":"0.19.0-canary.907d4d7d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.907d4d7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-WaNvspv9LjyN9/R+HkvG65XIHcN+P/HAss1xt2xhMh1G6igtxjfBGwnu8ah8es6EAJUtsrlM0etV2ebNdiyRJw==","shasum":"73db4e1c2b4360473698d7fdb84eeb7e53be160b","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.907d4d7d.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKIA1CRA9TVsSAnZWagAAelkP/3K87G+3DEWdUu+crJsB\nYxlkUnRl4wavR2xjhxYti1XV292pjcw7uUJi/8XYC3LZdT7GbzUENRvrEGdU\n8zfxkwu36RgU76RXvlk8LkVbdJhuH/OMsuMqp9uSlJT2OnCNoTg8VpUquD+2\nJNG0OOUHTbjMez4/wfFgFXUs0jcSaeaYB6dnGqxeOvbmA40TndLFkaCZElwo\nQI0TNSlSDBkfib3DjR/lMxaVqVChVcOpRKEe9JlJ6n6gYrUGKWE81iCMND6X\nfGweE7SZWMRLibROcnc0a/RDOgI7ojnGALjgXtzKr8AhfKkTVRI7dC/IkxNg\nwrt/qYS2oaQeK6N26vVvabtg36K8r9pZmE4TI9zWnfXL1bnpOz0nrkGVc0HL\nr5Xiw5KnmlnKc2qcJ3V4LCBtEpPIEY/ZjWUZ32yhUGreIt5udrSoxyFsY3IH\nbRPX8Ab03fnE5h8ViqyyYekXneD8BctZML8afh7oa6BXYf0Xf4yBzOIijJKO\n9J7252ugJ8nKtBmSfu61VgxvFD/V4QroWTWq4STvChngL0qGxxi4bzT7cebG\nGSKAgeTutH3vCCts0jJbMGfMTfFoZrXAghnCCAHkBIM7wNZsc23oCPPDxQN4\nt0EVjfKiPBVHbkx9Nu6EqjDO9Iq9FpxzW3kW7tzjXoDPcLgIZQDPCbbNoY/6\nkP3o\r\n=Ie2b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEOhbRjmyKz56FH9r4oJKPLBmN2/F75sHyjlIOHf3qS4AiEAvDH/wEJS3ot28PDeZp26C24MrS5uDWZoNgZkv2EKmFk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.907d4d7d.0_1596489781075_0.47390596131019636"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0":{"name":"@material/mwc-menu","version":"0.18.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.096a7a066.0","@material/menu-surface":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"^0.18.0","@material/mwc-list":"^0.18.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"907d4d7d7235b3a3256595bce22f0d7db165adab","_id":"@material/mwc-menu@0.18.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-8Q13SEZaA65YowURGrUWnIubjVOK3my5OUHHhlJ/jGH76RuZTZAJ5rwPl+JzUZjJNdPeOE5MdEUgIYSE88pFbw==","shasum":"f596f3c90c8aa7f59e9b9269cc039cbcf396a5f4","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.18.0.tgz","fileCount":41,"unpackedSize":623406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKIChCRA9TVsSAnZWagAAKwkP/jtgNE8iM/kr7zEksn6y\nHIgZKLC72g4woUmrKI0xpVqbxbPgHEtxyzCs10USf+9AOKGNRzHaWK+rGV7g\neWvLsntu8IHS1GZaGiVMjUgSCt8f8woD7Qx3FW0ZvxFKGgMeK1kP0zoOPWQc\n74w6MjpUYJPgP/MVcShZb2gAW6S6lUPvzdGDk5gvb7Mc+dZDG2ECh9c66T0/\nt/1AiopRizk3EGcQ6919Bi7Db+o2FyBSZwDsNB5k1XCnFSBIyYX5oGuIToPs\nBQTf9Wn2/+pSIsXhd/SPcFmX9ULSZ7h4kOcYIxNp5CIbl1Mrq1XE4zL4J32S\nzZSviZq6DEzuVYpMYbpkrPU/EH5JETejO+9ZQniSYommxSTVJEkq4/RXRFF2\nACCTG6mYwYGUApFPYugoEYEeWCgpm4AIRgsL51qx8w6z0ODAuSGYQXKkCboz\nPTjJ0veAGvyDaTLGLYTtH61kvUnVacS8bvPtZ8/pZ7Xb+unPVuFeC9SLL4C0\ndmIKQ3u57p1/TIOXlDVQHfDtFJij1gahkbHJNTKdekB8Ml3fLsu1K90vVE2R\n8fBy1IVHjTFEPdG7h9kmxIQ+nQvadtMfgX+ADK+Hp77HYJrEAM3n5rP0gu08\nYdM4lgta0HecTsdrxJFjFc267hy4lh9MaNtgvcdIqCPfCT/4IPonXfW5ERnj\nQJj3\r\n=2MPY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBuTclVUycH+GBCc6wn0BgK7IGpE3Yk4zy9v9EKyjexqAiAGM2fS1mitBiEo0+TPkDGmVHHJ6HB8ppZ7rCnFhiIu8g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.18.0_1596489888749_0.9460835045440439"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f7958e4a.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.f7958e4a.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.096a7a066.0","@material/menu-surface":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.19.0-canary.f7958e4a.0","@material/mwc-list":"0.19.0-canary.f7958e4a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"814d7f99f2c2016c7d56a7297cec2ee04c29bbcc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.f7958e4a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-BpeDlSULuVajcrVZwHQjR9Hat9mfq2Rtx+yAf03xw3B6nudaybm6aPqbURiJM8S32rrwRhFg+Jh993gZcXPO6w==","shasum":"eb5aa5f80ac2a9f06050d2cf062d01304408807b","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.f7958e4a.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKMLeCRA9TVsSAnZWagAAkUsQAIa17BtiCSklbfTe0LoC\nicd3eeSe0xRKEK3nvjqkdhs1snZg8VV0Qfk904gI/mdFnOZJZFO6mNF5EmM3\nHdu07Al45Ti/morg9r86moln5bLTh9nElzAbB9gGKYW262FJXxmxBT7AcNyA\n35OCqwqQlVf+anELMWCxBEiMno2OoRppPqCYByDTbaUDDl2ayq6IGN9r4jX3\n0MMrjn2Sr8WZmsr/gsWeUnrf6zUq+ZEXxCF2EYLhYiKiy3jWmgTd32K7H3h2\nFiNsuMAMVcfrzPQVju5G+EqQT9IrpI3eueYW6VX8ITbuqJeWOg5K14v1UOZq\nxD1UfqOmYGeF7gMpXL33hsg/eGXNS85Fm4I2ZmbhIMEEnc5kH6XVcnuVC+ww\ndVsLvivL+M6/QjPuUscspmXuxneK6YHrSZ82FD+KiRV6Oo/lkWLARYvFY982\nAQP0+gJ4d5CGIkeIsphCI632TFMKClvzTzndoYqR5ln2+C/GYOhBUTyUYqRB\nicARr2BiF7WF71jXyrUUWFXMaQhcv1rg9u5HzbzHfoijtw45W5H770+y8UaS\nW8x/zxwoauspoBRPKXjsORZNI0kHmfxa/E0WBUl8F6jWLOGQmj+emjvK9+5a\n9HbROrD7Qor9xh12MhPIUJPTvmF133UkgXI/FG63VQ8XZ27QY1Zw5PLogmR1\nDVyz\r\n=rH7U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDwqO911pl1gfdsc9CTdTicNV2ksCF7ao5TYfY4XO3sgIhAJ5WwNkKA7chQIVe+PAtzLNRv8fQykOUOR/lpxnk8v8Z"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.f7958e4a.0_1596506846159_0.9006077846214366"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f8ceaf79.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.f8ceaf79.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.1b44b43c8.0","@material/menu-surface":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.f8ceaf79.0","@material/mwc-list":"0.19.0-canary.f8ceaf79.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"a1435334692098639ad087e00c61c1190812b959","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.f8ceaf79.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-N9I2tvXYIu8ffSrbyRZUulpMS5rVQgSw9tmBuM2+KVZ2pgqhZH457ThyneQD+ma7UQo1iCi5+PSK6b2+7RvYxw==","shasum":"f5663c144b6773a46f2d54990c107b125e503ffb","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.f8ceaf79.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKbSSCRA9TVsSAnZWagAAOogP/Rdl59Nud+KiTyasSMbI\nXl6zZ8eSnJpaWFbc9nVJ97GyN+BoI7QD4dxX6lkY8EG6+Mkx0cEMlhG06ehi\n2dETy/6y40FYI+R5SAAU7s/zy5q4sGIFt0Zizqi7YzdsqHozEDkwf2qoV0lv\n4s6TL5RZu/jiSnE/1cnzC2NbyzVNthRxmqspbu/tdmbLvsvaGYCDLwAdXjUx\nCKf7ypz6rVLzThQvd54lng6gljXKNCC8CKoftf0SWacAzJ3jCwXUxLiR4bKN\nbvre2LDdecGPiH2DHJ3hFls2su64NWADzUcCHD2rpqh9ZTiTKM5DLCK5rJ90\ny4xYePRUnxjYuBNyLMpeINLGSrM343PitvKMWUSomhqJt3I8uRjGj4SguLcm\nSLgwyRENxwQl5XVnzLKwQNOVZljH8JwSDiuIs0dEi7y1NPWnxgc+/M5CThmi\nEn2oqX2+VHJzpF8CO2P3CabCNFgS4VtjpG+EKCiVA7QAoxkiFV1hzYm/7zh+\nXs9uqD2fYLkqPZ/NLeCE49K6Tr232BbEHjOLsHpbdh3O7NhfEAFIG1M7ugbq\nyid5ePzKwgmEUXXQS3hklP0qtQn1FZyVwkxJCfrXLAUxztKvvnMV+zAXQZp5\nR7DKu0vRIbgq+mYpk6+il53i4vdxbXCqwJgpIq3CuuR14L/KKfnzbLOyt8/G\n4MWR\r\n=YBG0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFbVjLR2chjdfzW+wFQ2T5y5yJmA61Yw0xVONvUQL5j8AiEAgVa1UqRJaS6JMZiFy1hR8FstG63WsDTEdLfwtVYltXE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.f8ceaf79.0_1596568721732_0.6907679627276773"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.6b9e385a.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.6b9e385a.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.1b44b43c8.0","@material/menu-surface":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.6b9e385a.0","@material/mwc-list":"0.19.0-canary.6b9e385a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"d264df08ac61122a6e48c33485335fe7444fbd09","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.6b9e385a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-KILGgowgvYmAfKxWkJuBkJr+1HzxOJXUVF7D5F2W81Lj31mrs3q7I/JAOP3E8lggNlxv+wvwXA1f+Fga/e/W0A==","shasum":"d5749c0d66e05fb60256436d55bcedb72dcb939e","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.6b9e385a.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKdNvCRA9TVsSAnZWagAABRQP/RkAR7gj/rX0LC0wnJdT\nwWxmZrhD7Gk+uzrB9sV4MnirUwAmyYXjkIPG+PdtPahxvJOAuFpwiKRySfwA\n2+lP7G1aAyU7FD3SJv1nCyExY8vgdmt0A1kFEWk2PosewjyS5XxiIGwIHWn+\nKkdwqpwK1ui6LfB/MjioRtv3J1QB0tPlKALGRPtvDc6zw9L86O2ZHS3egleT\n9+oGdEsQG3DOAm2k1nfIJXO9oxrU7Pj9KREjox822u+AvEzMmkRqw4dqKN4Q\nNnHsNG9hIjREOTG0JbfQUcYXKJfPlgYDi5JiwOzlCShkRUE6C82l/2L9c0XF\nL6gt5DK2R7my7RxBxoYNHKz56FYccmJL8GPAgvLW6mSp4dtHlxaplig27MI0\nOTsB2Hj1vFbQXz6kz07HtOEbV54nZ4jbLvFltV5P0e/hT1Sz2E0/JBhlndkR\nVmo4AyexACI/tDLc0+C2dsMAlIec4z9USNH3MV+XWWHMMCixGob7a8kGAS4X\nNCywOutF/OvbiWXz/BYGdlcUrSV0hxqsa/RmKpO8PKNcRCLvHPokHVCm/ETw\nkCWQVPxglG6fveRPg6QmD14FDrPEb8qyloBSzdhgZ+Txue3GujN8lvFURwaY\nFxwdZoq5ldAf+/eARMFHGh22HmHuxbfSLowF+zBLNY9v6xfgOYJbRDe112jV\nsP5A\r\n=0AD9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4rIbgNBqwSVM6h02VCFtaMgn9uxnEVkEejrnjLCxo/gIhAPo6TcLIsJybu8jNCUPPz0gNbs3CR9ygQCyXhj7itqgU"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.6b9e385a.0_1596576623185_0.8595610176591588"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9a7e6d2a.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.9a7e6d2a.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.1b44b43c8.0","@material/menu-surface":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.9a7e6d2a.0","@material/mwc-list":"0.19.0-canary.9a7e6d2a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"162d034ba4d899bea7e421640d7cab04f0130e9e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.9a7e6d2a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-0iLJK3tMMFdVQUSOl9t+UgMTvtBYZz5biG8vcUXphX5sUs8Yu8jL5ycdOTDMwJDjleOoll6m9eX19kcZIOXm8Q==","shasum":"758eacec27792e137e1d3aed5446ce3f4d6e6b22","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.9a7e6d2a.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKiuZCRA9TVsSAnZWagAATEsP+wRet0ufSDK6mMVmYdzT\nrD971zCznoGaailRbneq3yyolMLkqro6qSuWx6zTSFti83PtT3dr0PIbrBCi\nreOJ+YlyHezGf9Sb6fJCyON13ZU+naVPHIIImioVNFzuvDDF4iGI3FYv3gND\nZI13BhEW2vofA25YXu/wEVWDNpruKytcstFlpbGZ8XNkfnTGwi8ranX062b3\nhrzzOyF/vgRs+YFzFv2CxHwIp5v5MOMSDaM11YIDwXaQHdMMe1LKhk7ReGQ5\n+5/eRRHsgTRn48pZwDslt0luyUC+7mv+PxQw8hoFtHDC9jF1HDKzoMVRsAAP\ngNjlFmHBhaIMGNh/mp/SLVJ3oHC3OYDeKSJXQ4LjSG0JvJ/GJDLZ2wtYfJue\nLx+UiSLNflSJI1AC83S2AoO43MQNJgFBKrtXffYYq0TM/VnqX/MY2XQoPmzO\nIBFcSCcFmD6azGXBKyVoV7GtOLqqYdGku6AhcqEfEWafGFf+iXVrr3oL2erJ\nWyb59iEZyzWmL0K/Y+ZP9mXK8y3PfjyjQXkVKbtl9CFHpm2tQ1yK7PYW8jIG\nv64Gm0kkUQ/0igjZlHzmrjOX62K2j70np5ISFXmGk6ujcMfCTzs6AxCrWf55\nQ4796LBZpGOzuS1ddeqYqLYhc3psP5lF05sef9QahdYNbzSqzd0ueLiXUVyT\nGHkp\r\n=6/4J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQ7rHlRt5Og5MgHLmHKCDkf8ZWZt7VQIzLccDZue1ZrgIhAInaRNzg1EiQWsW1DvBeNy5Di8HG4enq3eqifrNBaE0Y"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.9a7e6d2a.0_1596599192988_0.707569898980654"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.188f3f1c.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.188f3f1c.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.1b44b43c8.0","@material/menu-surface":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.188f3f1c.0","@material/mwc-list":"0.19.0-canary.188f3f1c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"200ab3c3186265d2084631aa4f47600057a574eb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.188f3f1c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Ha6xBHVLAOuw+Yz4X03dog94RRMc5ec7icXkI1NjGbwo4Wle0QSqwTT19+xI+L3HLf/aEXqQAleP0n+Z3gjTRA==","shasum":"5a6f8e9e3f2617a52f2228ddffdfb884acd5eb55","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.188f3f1c.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKvbnCRA9TVsSAnZWagAADvoQAIxRJtP95ZWHuDRxjG1Q\nS8DD4x/jnf2455eqs1386HPV17JM4s+pH2jxLkGcpLArf76n6lnazy4ShIj0\n/Az80qToKAV+ImqoBo+2qLTJUN51auoHbFrHkRQIy1MvSoJ4faUKEbDSwLR5\nK9ZaFkEECPlea8COFppUEs69/x3aQGe8/xYNmCWwlrHgrPGKp2w2WehtQWmm\nuxqZNvnC09uZEan+GYqdbhiLHkF1u6inpVqZ0iS2xEK0djQRqJh5d4Szxh4s\na6x6FjIP0rulljDd/owkoMFMsM7s/f+RRUuHU3zGkLGNXG3MdlkyPErTiuYg\n1C9OpA9S3cxCv6srHhbSvRKCobL+KSyQJmzvf/y467ELVJJ6OItoRhQfhWM6\nxT7jHGfKgcvAbncC+VwckHCaBbVODr1/uHs4k4+db9X1GpyeLfs5eyPhcMP3\nE9Er5VBPAFpooMU4A+kMmKIX9nz6P5b6UoN7EcCPkwq7xDjCRLTgpoXLdiBs\nSwjuFC6X7daT0SKhzIB3MkCcbN0cgriXmp+azkUHSuFIlqo3Jwm+AhvmRzeT\nDDBtrXaeSVeMXi2zl7zPrkjjzL/0x7HsRO9tW4OSRcbLc/BoCw4qPNv07000\naZbjm1PcT47nM5HgLPUPF7tNhYVYO7futMehMcxTF/RQDhCN5jyWBvpZpWzs\nCgWx\r\n=YqJW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgArHRlGUZNLqDFXVDqEP58iEbkk+R4z9EfSo9v4CkSAIhAPCNdps5NPxKhwSZG7RvaasGOvInGJPl9mCxGe8uX6BP"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.188f3f1c.0_1596651239159_0.7749373243449151"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b6106add.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.b6106add.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.1b44b43c8.0","@material/menu-surface":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.b6106add.0","@material/mwc-list":"0.19.0-canary.b6106add.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"9726e6593d779066f5b7158af254537ee9c9174c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.b6106add.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-DYNThHWqIbuz4cbwWZuOCG/IUdgB6cHat9xfzi0s6AmhuqmGIYDNmZdRE7mFHhQB67CJVvl2Ig2YqmpWEkjnkw==","shasum":"e2019fc1a3670128883a13404551c8b77a35981c","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.b6106add.0.tgz","fileCount":41,"unpackedSize":623458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKxt4CRA9TVsSAnZWagAAK5IQAIeKH0frYc+VHiK/zfGY\nz52W8Jxz2NEx2vrxUcuDsXlFGwu74W74LSpxj+kRtlgp19IPCCUV+avEV3Ep\nV2H5cMizNfP0Y/BJpYcyd2TlfdJF82BDMg/MBiNMBg6wqgOauEvhg5tUTfoT\ns5oLoU0pare3NOFYPqUe1MrSwC00ZtE8hJL3dSLx8CzIEq23T4JaZQP8XtU+\nSRBzSo370LDCs4Cjxq6HWfsM0jqZH9TLhqeW6KgD3sk6uX/37AxNufVLXHWz\n52lFP6YJ4MjBx728XnXnWGO+Xu/63CyB5hcV8g4FipM0c2BnhVg3tH9sB6My\n9temYa5+WRbJPb97KVexmYSaloeHARhSLYRFOMFgHN1wmDD2r5zNhUjuWfeu\nFhP37+GD5jMrdQlDBR2zn/vtTdwo07QdUUkfDJkCOIUprkxAy1x7zy7lHHb1\nC6NtVHbteMR0FHzUBFTKmM3jYcXPN3yJlaewi/WNA73q5thWC49C5xTKU778\nHBWmxcAR1D58yrt9IRpPAdI/Eo3Rv265M1YCd2oIKdQO2KtjsvOfF942cVU3\ny2TGxRnapaxOyfyWZIp+XikGQsu5vzXfGl1TlHsNhtXM65dyzJF7/JlHdELo\ns86pnb95+9/bG/p9haQP0JGcZ2vniBdkDWq08tD457RW/G2njYtxvvjlcrHR\nYLj5\r\n=2nFa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCLFHky9vlYOeaf1GoDjsnfoSMtAXG3HgzJJshiXLRNnQIgPGP2O4X5jhher/odXfB27l4Mb/UOrXQFDbIZjgm8ReE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.b6106add.0_1596660600186_0.898791465245423"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ebb4c667.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.ebb4c667.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.1b44b43c8.0","@material/menu-surface":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.ebb4c667.0","@material/mwc-list":"0.19.0-canary.ebb4c667.0","@material/shape":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"6911337bd0577b48c85e4d3502ed5111b12a7b4d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.ebb4c667.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-44NlPjB+Owiaxfhj/FRN3bdbEauxWOS0x9QNWj31pX+D6tkZZajgOqQB3u+gnCodp3odj1nHlU+FvQFJDgjvjQ==","shasum":"5048ac924b5f2591b07eedcabffb0c268f9dcaa4","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.ebb4c667.0.tgz","fileCount":41,"unpackedSize":627640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfK0yNCRA9TVsSAnZWagAAFcYP/3DCv+ngSlaOKt8t4cLX\njaplBN8qebYpMcd7d8djoLSHUWiwngGKibNNY5YRZ/y+0tnfMm6rZJxCcZFQ\njTl3EH2F0O3PjXnH7kgbwE9i1yP6T/3Ovv62FtEUb+IfMk46M3fjKWdFg5bw\np1yoAca/ddbKsc1HigVqIOVj0kM2GfSixZ0zSWDr8NeqMjdBC4ceL6YK6D1H\n3MEm9stHuouFyq+dTSBsl49mgeCknJDR6GZZG+zbti7eVXYClRRXiUyCRXkd\nJFKHbmVcMLo7aQDMhLLC6ysTYgHMzgqum88N1BHAt0c9JTiBs1T1eleqPclP\ncL+S1FBIvZdov9Z8BK9jPHi39eBct3Uk8KbrXTgY4aG4jfC81f5CBx8nsUmx\nFjZC6klv3JMThqY73HIBSOe5r9FjUkivMZsSBzslsBF4nCve49iiSiRH/S1l\nZLdmMKaDyXoLuqtHwWmbg4kxk1zqI9JYtFCx5HjnNAKg4GMikhOIHwOsE5+f\nyko1cBh7IOMefXIPQ3+47egzwgjkw/2VrVD/rhCUKoT77IDyBNZc3PQHFXgS\nsmFIE0fLWv4deaw6M8zzLtgdQOgrsMW1ESKBN/PFEl0l8jmK9UrxF4ykoumA\nVXr1GqfrgmnkiujVllHcphiheYYnaSUz6FDBILFfGyBuAEpn3oYACaMEpLml\nWZFn\r\n=A3xM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDlIu3H1oUpJaJk9vyhzyipBqRIKHE+0eRwNU8p7LPtGAiAgPt655DwFJnSQHl2kCgfqn41P8hfNDQNhDkdnJ4QtoQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.ebb4c667.0_1596673165138_0.1848040467159071"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.aa44289e.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.aa44289e.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.1b44b43c8.0","@material/menu-surface":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.aa44289e.0","@material/mwc-list":"0.19.0-canary.aa44289e.0","@material/shape":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.aa44289e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-O1jGfjm3sE7qDIuf1ozl8Z2Gom+OuqM9qq6Hu+iqh4TYHlN2XADqVLnaXkVMiIc+XOCsHTZvs2ZVJEzPn/4hEg==","shasum":"7e4592b355600c3b0be94432a8dc5551a52c358c","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.aa44289e.0.tgz","fileCount":41,"unpackedSize":627640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLEuuCRA9TVsSAnZWagAAGccQAJjz2ZIAPKkjDlm35KyE\nx9ux3n4p0+lCil/AKvg5KoHv5dORAXsPzYCmj/mXLJEFm6O0+YzO7tx44p8w\nmgJtcI+wNhSll25sx6mCMtXyPHeTAjIArnCrAmI/T+OKSjpdxpiyhkCRNerK\nTFVYUscn5f+OCFz7EoZEYXvj3IAAeJt+wmG7J5oVDgzStOPtOQBPp3FN9HoF\nrrggJpIznnwJwEBjlpzlGNRC5NC8uPcmZ0+94KljYpd4SKC3Xd9Wkz45SRf5\nRdEVcxJ3xF7fO3SLwmFjJXbvBfqaMIc/fJoJ6IaFyrDyARFfVXHhEL/iKrNh\nvlZbTidmvNL3jErg6IXQ/vykiWp0QXcAfgsvSjiUCFbSoM08+hGAqw23AAna\nzRSbwgmKVZlNnelecCSk1Ij8d+PmA5+jTz5Jxtq/0MtF/MmWaECM1Xpeo2Oc\nrbBl3lkE3wCvbtLraDmKG7bWl5N6/DdQshZZsYaRJOobU/cZauvW6K5HBZ9n\nq/vccUMwKiVMhO/pomFzvqgd56adyGgYjlsezXx+PXQBvRDcCdrTDp3tQXDo\nQdnhH5oimX4kskPV//LYrEcUSPJlWhIwN0Qs04eCl++OcJHaM8oaH8eW67BT\nABDPCcLyLjE3nbPHtKg79mjtci9Bc/4yZaaVrQd9SrXo0G2bsjs4+DO6qrYt\nmDEC\r\n=Jg1+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICNRXl4ZqJJASHwwsERubQe4G/2a9wrFH3QfgKgVN+WbAiB3KdM1PeK9f9qEbu9SLhlLVfqFk3y9FYQ52QSR3haaaw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.aa44289e.0_1596738478226_0.9079819520818551"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e6b0816b.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.e6b0816b.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.96a640534.0","@material/menu-surface":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.e6b0816b.0","@material/mwc-list":"0.19.0-canary.e6b0816b.0","@material/shape":"=8.0.0-canary.96a640534.0","@material/theme":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"b80bf3f3363af2f1b704d5fe2fe2852cd416b902","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.e6b0816b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Wn/QHORNOoJM6YQtN6CR1CrPjU3usraeS9/R1iFah3liLVkEiCNoMxD7Hwo2I0dX7Mh0q4Es2NNvSjr5pNwpsQ==","shasum":"9cc9cd94c61adf1544085c2441ac57fac4f7c433","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.e6b0816b.0.tgz","fileCount":41,"unpackedSize":627640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLaEKCRA9TVsSAnZWagAAsHsP/0pE1WD48WOYaBtff/Kv\nW4pkvfhZvjQt72LwK0QmRkj6VLDjxpo2al3nYkpcfisDNhktnKwR0myggICm\nijDZ3e42PpmhBacHkUGiSWeP5YPgkdWR2h8PRDQEgLKiJnTKOex0WWM3O43D\nUg2XjfENK9iOTUVQULT5+yTopI07gneKbbkMb7mN75BvfliWigT0NBSW5OgO\n5yGQ3Y7Ts8tllmucgCWjRPidIzmhZMHllZ68COGcBC4sFea6ndsvvW48QEu3\ndmcIkLjnkesKEW3mytAJZPRAYy8/LsSMTKfgxrwd4VK0PTzJhhM8n1yTRKRi\nXFksc2NS9FXTATdjXiZL8r1Vd0EW+iq9I+WpmZStIht2651j2jhQOhzx9HRm\nTG42E+YaXVLdHVzzpkYgC34TmI38YuVq3SZB9/bX9a5ZSZeaH1G6pXenBpKT\n/3XKk+sqzFVUwxtFng/2VvazPstxzEOUxCqSOrtpUvYT2sT3OwFH4YzXLLTJ\nwCU/tey0Tnu4zIhwlyTxiCsX+g4xq6uzMyvYD9ppu1MVBmZPOLtOjS2dqDw0\nnk5hBtvzBMnkN/kg1B9za7wWA4mKZB2b/MIbbvHpX1tsa+LvWZALdIj9R+MM\nagnCkekMBHZYpLmTF1wrW0cJUphMum+KvA9+I/XCXWqCUT+aoc3cDblwsXIM\nP9Hi\r\n=KXbh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4tlALkZ35yVLpiJ/d6gmAJpg0qHDKa9hM5vDZtTUqNwIhAK4SplFH1sI1bnKdCtcAp0JNbjlUT7jp0rdZXurNwqFy"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.e6b0816b.0_1596825866048_0.780801988070454"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.96d15938.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.96d15938.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.96a640534.0","@material/menu-surface":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.96d15938.0","@material/mwc-list":"0.19.0-canary.96d15938.0","@material/shape":"=8.0.0-canary.96a640534.0","@material/theme":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"6e91207d87648ea038ff3d435537ba7b2014ec19","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.96d15938.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-mitwFPzB4smmf8qAm+lXC2URxKzT/SLOaeP60/D+ATacVqpr2UBeRjAd/9/NxJl6G8nftGVuPGSItqbMlPxArg==","shasum":"a270a8ddd37e3d877dbc079bc5ceb7ad4f939145","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.96d15938.0.tgz","fileCount":41,"unpackedSize":627640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLbmsCRA9TVsSAnZWagAAkiIP/3lR4Ak+o2EezZLMVWn8\nYBGiy043ynUtHU/2nfillNH0HDkhEp/Exujp551aDRlHsbGM9xHQLszGmrYG\ncjV1grBSYYzNdymlAJiQELFc9a0uxEx6aD88sIsCLus3q1ON+U0/0Q8pfP8j\nZLFKR1nv71VUlqzufFV1ZryM/yH9zzTjk6/KQTKDLSRlUQ89dL0YH1tLhC26\nYCQLMdrrvIxZIqpRcB1NmoIcTbh+p420LJA4aDdLQSuMRALcyr/Ua7tH2Gsm\n8bDTClSOuN8/IY2GHSuhqyBit6URYTQCTBQL4osMcfTtfXBK+GWKO+yqR59U\nYjhIbtMZ2UZMPFZiJMX6FnC/UgjzjSG9O4IUaxLutwZGixSNxcghYiKhJ1jl\nFuopBGxv8uLLZYvCxIvJJcSLsuEetJb2M+QH+3NeLgtQS9Ja/43baEdWIu5m\nS5RIMy6bzRwbWuDZf+Hem3Zxcxt/Nh0OFu4oIdoAWpJT9oRbKnfQ6GtTtSq3\nyml3IVqc98KCsCD9tSy2BBlPWA6dj5QjZW5EGDTRYy5Yy75qHKazNoo5v1Iu\n3GWgareEyYmg9fO1nxjWcXCkdKKq6l7Ypl4sknBYhiMuUDOLIBo+VWTye/6P\nVXO9bC1PSq5qrUYjmd6WONJ4lKlL27hg0rke8Us+0wbemEwAe2dXHF3nnDIt\nAKX9\r\n=FJ35\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfHzzgX39mZmLKNAKeLYeJwZeiZsJt6NRrK2A6QLiKWAIhAJEtd1uIYs43eoJFNHFShprL4u5xwbE3OQAReRyeNwYD"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.96d15938.0_1596832171837_0.16162499640209926"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9d991c8c.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.9d991c8c.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.96a640534.0","@material/menu-surface":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.9d991c8c.0","@material/mwc-list":"0.19.0-canary.9d991c8c.0","@material/shape":"=8.0.0-canary.96a640534.0","@material/theme":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"b96115b555701f0a2fb8299279aa9dfd1bf6b4b6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.9d991c8c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-E2PAOKpZStYYFz6gSFp6IucU2ZVgh9ihj+htH2PHgy5NjXj05YAXD7fWqszLok2tZvJE7xz8roGN7Q6gJWkwCQ==","shasum":"d9ec8b5a9c947ad1189b9211f54a0712fb4c4f66","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.9d991c8c.0.tgz","fileCount":41,"unpackedSize":627640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLdD9CRA9TVsSAnZWagAAvPsP/i4hA5/sHTpQorAnEtq0\nLYCN4MXMlm/zDAYo6XQz4vuQ+kkmptBiYyiBYszvEfKkA7JOfH4N60NMIk3y\nSromnw8PrKvDCo8iXjTHR2y4dTGld5o21TE2p2lo7IY0blP6/W8yvCFxQQc2\nuzAqSQkEDY/gv3tWilyc2tAKHZNs1jmKai226WYbXjn7unSRSCIK3taGnTSe\nHV9kZ6lDfJDBxNM9XI+pNyMAVMdkrRJfQp3RQ0LZZk2TX/NQqwwsPIUphNvf\neaR/CkHx4tK9pXpwMcYYtAnYXwgWnZ31yfTolA3iTrpV8PYS3j0bUqEZlz6g\n6Q/x3BTlMS/63FN2kj5AhPzTCPl8bZGI9ovdNs7wC6RVvY2f0Y7D8gFNPfqo\nljX+IvXJ1pGEIS6tRDhmUkstxeLpDTM8x3b9AcjdQ6XkjPLm3TBqFsze9vMK\nj9UXLutQp/x4StlQQeeNKuxBIm3jRtUy7PPoc7YEl1sqKz0o83PnR5aOuUJJ\nhekWgiljoqe4S2+1cjeBSgeSBogJKCfDqwoZwQcvJdXrAiOlayg9clrcQKpe\nnX6/9jOKhinz76yNWulDwz+2cVfqrTx81ofaY/FSvKG/ujOprB07OIgEJfnA\nmYOns9SefjkSQL/h1sxTh7D+k9sYtFOS8482zQPqzMW8X8uUd8NFC7MqQcva\nduHJ\r\n=x49n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWh3JqzerrL4cfUyS8Z5mdlZIkcv/5RKPAjYA7r/EhtwIhAJGT/FG+NQWRX9FVtD0ESVYT2ZUYvZRCx5cXS75COPzg"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.9d991c8c.0_1596838141226_0.7994917033902578"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.13bfbd72.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.13bfbd72.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.96a640534.0","@material/menu-surface":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.13bfbd72.0","@material/mwc-list":"0.19.0-canary.13bfbd72.0","@material/shape":"=8.0.0-canary.96a640534.0","@material/theme":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"801272b0ef15e1f90e0ba47c6a8d185052f8c48f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.13bfbd72.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-B8b0UsuUK8HYsvbDWJcJKM+s/fYiM9I1YEMTV3nNIP55NuY8VUH0yZECrWF+0UUuiwg0ieMvtfhBCY8plWHm9g==","shasum":"60f853fff52fe661345c654a0507cf6c2a4257ff","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.13bfbd72.0.tgz","fileCount":41,"unpackedSize":627640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMZ++CRA9TVsSAnZWagAAPjoP/1QrkziBAQt6tjstOb99\n+mWCbut/W4gBLQ1UxnfviAVbN39OOPfGy65UIW1NiU297vNs/yxOtOJpnjCt\n5zl1YcVpwdjMUBbg7nuQVyFyNf/t0HTC8U16FZbjMdqsi8OOaJwKmfJ2oBDB\nq8xV6Pv3F0uIdAT8eYHKOThrEg7DPN9EmTa227JxgOM/8PyGfy+eYH8FWeGs\nWxUOlnhUzOQA9QPKiunpVwUsFvxHYxB8JIL4IvQ859e9p7Tj2/dxRemc9Cqq\nBIfyknnxMNXn42OG8UPwAXUgSosjaTEK/uIjzT583lQxawreM46qelQpAQGP\ngLh8P1o9/DGYqrxSI8JESaYHrp5LT8bjO6d+0NohO/Foe+hV9vR3nRE1tfDY\nRq9UCdf6OW2/bVxNuga21a/lZmOYNqBtf138RYkehhrCVt9CSUWA0KvQ3zYA\nnN2JrA2Bf6ilBRn27yOpdC0lzf24fSmkqcn+PKUpmDgykhy4ttGGMUjVEALA\nD2cIzerFCuaOj7gtPGkjjf+nuJfoyEXWdLbeQfifTvwuk1WYdT42HzlDl893\nOwyop25dx5QMhdI7j0s91gHmWsMNlyWEVYmCxkG+T+UxAjjFeB36N2Iq/yjI\nVOFbicoJaGlBhK76oWoiu1cHFH+FhIIpD6IAWGlb7M5qTCEVuPzSdOpL7pGG\nS4Od\r\n=oAQ9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAcnifa8P1BKV09lj4GyMHaFetRpk1Hi7Vsg4deDBZ9KAiBCRiEwXVv0vf2Qi9MGeBEFIHADBBKNFGUDvW4FOsiMPg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.13bfbd72.0_1597087677621_0.422721128163005"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.30b1b258.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.30b1b258.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.96a640534.0","@material/menu-surface":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.30b1b258.0","@material/mwc-list":"0.19.0-canary.30b1b258.0","@material/shape":"=8.0.0-canary.96a640534.0","@material/theme":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"e34fbf2f01b3504b83592cfdb8b30914bad24498","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.30b1b258.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-kGGG6WxC645UEHAwNgf3+fDcNZoQ2iepOQg++0aGEzHSHBWrj6n0DkArs/e520mQLyKGb/0sXcTfj5M9DfzuIA==","shasum":"5b1eff19c055ea801597df7f4a3b36ef4c3f84d4","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.30b1b258.0.tgz","fileCount":41,"unpackedSize":627640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMakECRA9TVsSAnZWagAAqXQQAKGmhHH1m8Ks0Zif2Q/a\nakVe1tVLzntFaQ5Ka2v3t9ZnvVuFQBq+70U6f8ad164jDuUlqar5YAHTH+M6\nlBAmHIx70f/HqupOCEBCxaLKlalOcyUscWWVNALy+zO5Fr+qoIe6bQwSKeJK\n2Chr/72NX0ldyZRvVhANHvOHiYV7aajAH2lvLhgLC/BGnOySl3XGE6QamJy/\nVYjfvvqD8bUj18p7b9IWpid6YcFFPmWxl8PE3evvVGltnk74uG1c+X9PhXgs\nwgm0GA0thg6QruLblLuyYP+LPK0Fw8tK7yz8cl/aFd4Pix95FJc0A7Tmdj9V\nFQGqop+rs4EwdVlYZYw7dD0cJOXSCtGopjCkk6bvK131YjVNl0Bs8Bql3GTa\n1eABevGFLWfogggzmJnaqqSxLtG4JxTfVacFd9ufaMgmcluqbG4kX8n9Hso4\nOqhUSYWImr/wJZMdhV6YYyWVH982JeWf+eUxGrj3adhYn3Q0dlxNB8zpI1cd\n5FtrdPpQu6/ntYpNvjBjgKXmE8n60Z5ZrsOnoMkMHS8m5qbEXzK+H+AqnxNF\nQWXP+Y1zN/9sAAP2/RziVwagBR8ExyUF7n7wcqj81CMBymfbTBKJMTsEr4Tt\npUQw5BdRm0wLHUdxplA22cKBwyiQczZ6Gp2OZL/xAGQA+lkqHKR9xrVmpm/c\n1jVm\r\n=5MGD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCiJPeMDt7vQMwA7cOS7nhlPlzJvKgN7dFyGyom4JnR8wIgZs3s6v4Y6kjWsAXiiLVuoWvbDIKTYaB4hXYvyRqMlMI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.30b1b258.0_1597090052244_0.4777070101799821"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1583e263.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.1583e263.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.85a5272df.0","@material/menu-surface":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.1583e263.0","@material/mwc-list":"0.19.0-canary.1583e263.0","@material/shape":"=8.0.0-canary.85a5272df.0","@material/theme":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"e9ee447b02f2731c33f126f2c3d32bc3f2808125","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.1583e263.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-e9nQLupV5rbI4tLm1+8xf/24Tp6uq0il0j4uadxigikHrh+0EaoOuOJzonpl5MleGmki14G9yM5g232XP/kciQ==","shasum":"b8beb53edc263604356dc2844e0c10daca0a4778","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.1583e263.0.tgz","fileCount":41,"unpackedSize":627640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMyWZCRA9TVsSAnZWagAALpYQAJCdsM2DxX43a8bd6ZRC\nBtAIvssOGKGt3cN1JPzViUCbv9Q8eSXq9NcuXQ3u5tG9SwUZRm5wvgBmUaZ5\nwQ33GfmpiayPE1unoPoUPyU+Z3MpIYtpwPW4O2G+d5k2ge2IeoyItig36o6q\nWeH/QWmo2DxRZ7fTPPLXAhKkDkMlSDYmplQd0JyL43zEUqTc1Gn5N9P7l0dF\n67gYjzJMJrZ/sOOobljuzRKxo6uvCDdBKhvGQ8lrXDhDJkuIZJ7SD/bYQdZf\nYmXA6huHSalo0uo4n9QjKdOpSjfbIvyiQYKEit+wqyHJzcxbMzYCLi14ro2a\nfhvf56G3kY3UwBRKmSzgpzLo1v06iDA+rKMrH4SackgL+cpo226evG9KBP70\n0+EFcz+Knp/QSoZbdbP0e1iqLfOJYxKQe/DUXnfsStE8rFRNinUzr7e4ml6X\nEn+JRzkWf6fR+4sLwV27vJOcJ8QbCu3EhGbUqoKoxxBrXOmAfg6kr8sWaaNR\nLA09fnme+a/G+DaH/rsAU2nkdy+omovX84xS6vaYtOjumkVaR/Ygmwsqpse1\nKyPFU8nWuNdQTxpEufv/PX1v3B4UaFG91Z+Itvuil/M8/TXXJNCekp/rb+l7\n0zi/6CKzC2/yd9cefmm/IYg1Pi08ZG+3SG7SUQsRDvu97Q05rac/hv48TmD2\ngRRn\r\n=S6qZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmp1uElm9+zbS+1hmhJZtVwtpFRytUNkl+0aGax2K0pQIgDSOmxHzazU6mSK9nYJveQzsKYD4iCbDTglGyWB24YNI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.1583e263.0_1597187480858_0.8757991828524965"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.fefb1a93.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.fefb1a93.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.85a5272df.0","@material/menu-surface":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.fefb1a93.0","@material/mwc-list":"0.19.0-canary.fefb1a93.0","@material/shape":"=8.0.0-canary.85a5272df.0","@material/theme":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"328a8921a50cd0f162f89703f12a9e58406fd111","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.fefb1a93.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-oo2cdKxGcCWnw5LEjbQlvaFPWvDxWkTRoZp3hvf0JQx2Pj6geS8AwTj9xhiso3yMl6V+OLgO+9Ylfna08fsn9Q==","shasum":"04300bf410de3b5a467016d62ae1e2b4b6340f16","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.fefb1a93.0.tgz","fileCount":41,"unpackedSize":627640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMzcLCRA9TVsSAnZWagAArkoP/23duywEORcuaOy8yUSg\nEamhgtNsFlOJIWhQTEopfS2/g3C73jedo6GQSTER8SCenlAoEFwhi/djiMdI\nxN88aqFJbqOk2O5UuKa37IdnNujdyPXAD3/kh2UU8DMtj25DUxKcIf8fWLdo\nTSlh2VqS80GTFGBJUnujzCf8KY0jA39p0TSR9Qox6w5wiELfJzC24Q101DsZ\nyBL7meIKctebAYXcXIes5p9z/e+CS3x7YZrnVFhRCeZIwIKZAWscC2ItcRrq\n4+3i20yitIZoXlW0s6FGVNvSROaN5t/SUnSl+KrGxC3JMzvvxGObCvOPk3Zi\n6DezpBeX3J4wfbKWrMRjcu+whb8w4/Zu1D1bF3eL4oBd0olNiFOC00WUfR0d\n/K3OqEKzC+xbFuj3z62IJQworgzOBUQGqJF9cRqvQxDTbTN79AkzLGPgVHT7\nFdBKTGaWKKdgqiSjSYwLz25apwvHjj7K3LO/3/yix6p2x/k8QA5LtEPJIYRe\n9XNzGjHOAr6cXtZVd/eliz8qgMiGxbEStlZ6W0Ow/C8eZf+rSTkzXgN9lLoj\nsMXNPdb2PQEBy/soO42ITy22SrNbZq0WHEltgYKZWOZegCVsjtnOvoZZLp2r\nqdnwcq3gEI+s8bURZ/ED4n8h8cPiG7RtW2wW9nnNR4g+J56+TUHSScyOWBRf\nqzJR\r\n=juvs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCSo6FQEVmi42grKAMJkbOoVWQUp1e2XjzSNbsXCj6dhwIhAN0GjTej+hXH8GKI44rFUs/8jC7RIz9T/Q0xBCBkAJN7"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.fefb1a93.0_1597191946598_0.395215366692816"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1ac5b9d4.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.1ac5b9d4.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.85a5272df.0","@material/menu-surface":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.1ac5b9d4.0","@material/mwc-list":"0.19.0-canary.1ac5b9d4.0","@material/shape":"=8.0.0-canary.85a5272df.0","@material/theme":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"33bc5db0b752b7e0d3710150fbb0449121619692","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.1ac5b9d4.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-It13e7yfhDFdQdn5trFaMzrjH9HobKQXlTA0oY1WwhWUKTmN1VDyaOXNACXkSSAEEsQlN99XZGD7P+XvEsoGUg==","shasum":"42495ff6858ba831cba52a78e53f38df299703c9","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.1ac5b9d4.0.tgz","fileCount":41,"unpackedSize":627640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNDSwCRA9TVsSAnZWagAAOdIP/3D30cKZk+vLnojKYBWP\nz+GCvXmYmLK4zzba2ZXbvCsiWawUHj6CWrQDOx8Tn9qq/+IvaC9nZsBF9CCX\nzpkEf9JVoBy4ZgWOCiKon9YGZdvID9o5zYkRadKFR8aoiNBdTmmWmBghWYob\nLtIqsAU7JfaYGMNdOs9DsUD7yDhAt2ryaYsFbKva9V33yw8d4xMH81DHp92a\ntgBxeVEsxq9FsOww4Z2xZqAgRxWoDUZgwXWgP233GNGPL6qqiE4z4dcaRWzy\nqjGOzDINUyEUssiQMVAhIup573XIeM8CFyhuTkGTQRlu6JzqMasLUWHBHUpl\nMAYgVP8qtaIh+02bvmpB65gKzMrc+f6MW/TYdBmbPguu9BYaaSNdEPx6Hhpg\n0tyTsOBVKGiiXYh1jhW71rwN8NThJ5YBvcEEM9SHI26E9bv65EwPONcCcN1j\nTOpQxoOhDizv9EW8uPNDw6tbaaaJf8s+chYCBXmLlu5iN7NOITCKQuYxt06L\nnLso8b+eGGJcO46A9+TY7QOW+FU1xYNd6lqfM4xYorVjK8JCxd+0QaqAWJ8C\ncO9rdNN3t3plB6tHT3bjVWHt0xRM0ED1mX8OKvfkTbCpEfJLrFjJcylR22K4\nyYF8cfZIj4OWb/u5b4ueMNEqZxTyNtLnP/juot8pDXAAdyF0zo0ujqQnN2eg\nlic5\r\n=SEzI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCDDnvqBPcnGFYi88S6J1LSGhgsu9rMqt+Rzkr72E6qAIgGDjXrkQG8jeJCovizeD+PFqVVBwiN199zC1q0Xq0wu4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.1ac5b9d4.0_1597256879713_0.2618555414408459"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f17f5052.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.f17f5052.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.85a5272df.0","@material/menu-surface":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.f17f5052.0","@material/mwc-list":"0.19.0-canary.f17f5052.0","@material/shape":"=8.0.0-canary.85a5272df.0","@material/theme":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"837a87ef49533f905c92ab0aa9faee12e51ea3da","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.f17f5052.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-abh9i2+7oFkJJRWwn+eHPwWmjROWAP/CUm2JC+whrhs+L807HP5PxkQdg9fzu0mh9SAWkryF9WRwQCtnHUEQMA==","shasum":"54c5a9aa3247e4cb708107b45e707999ea28efb7","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.f17f5052.0.tgz","fileCount":41,"unpackedSize":627640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNXUcCRA9TVsSAnZWagAASToQAIXnAAH7cE0gxcZa7YKn\ncOqc1EEIYDYPk2WZAQghXIHudDgDNJmNxm5T2MaVK7oNzzhi5EGiVYuBA2We\n2bKbH1UQuplUyepOMv4ll1aKK4+qlGtLqFhgjvNXn9F/nZepd4RZK2hIAG9r\nAnAR2npyGvO0uzw2cGeup3d0xwOyqRI2pMBGkg4IGNX83LfzQYFz4bWTrGps\nIm9c8lS0ft7eyiPg/fS56kZaKSam7seFWw97Py23aKws8UKbWqvYsjKOfCwC\nsFzSwLE5U2O5WcQLQwSTmrwJOJHDE+y6xOw1M+OBKk9dCJn8tbAnAElwMLzq\n9jM6wotiKlbiWM3p2Q8l2CUpPZ0PlnlSxh+Cgwtk3Ay4TCTzmHuTZ5ZxfQVi\nQTOuGAPljm2YMVBSIBr7xjYynFbLoadmDp17PkSnEmaYr6gYkfHKIk2G+qQG\nBBvS/a7KUdw6NL87pc3dsDo/uKeNoe09S9xNM4HryNC/0setMt4bhouIQGKc\nVVrB1Hwq1fR9M6mmj2fgdMyon76m2AmuXPHm9GGMORxxTQKVHAd9vt0G/AJ/\nl5wqhbrk8WgAjwV9QBBUmzzo6ltXLrOkkHo3L3sGDbk+7kglMElTjxa3sdQH\nx5rLibwd5yLSq9vAu2EP/rwInkEe7ii0OR4sV2yswZ5dDjbMJ7V9Gcy0VSrW\nINWq\r\n=oNo4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAPWsQqfG/3lBZ/127g5JMBGQECrl9z0ak+37y+dV8vfAiEAti3lPh/va1aGxKoyh0G9h1j9k56lVXYqzcW1wNNRV3E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.f17f5052.0_1597338907608_0.22003912488762212"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.80b5d20d.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.80b5d20d.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.a1dcfe97c.0","@material/menu-surface":"=8.0.0-canary.a1dcfe97c.0","@material/mwc-base":"0.19.0-canary.80b5d20d.0","@material/mwc-list":"0.19.0-canary.80b5d20d.0","@material/shape":"=8.0.0-canary.a1dcfe97c.0","@material/theme":"=8.0.0-canary.a1dcfe97c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.a1dcfe97c.0"},"publishConfig":{"access":"public"},"gitHead":"2183b66216f3cc82a57427b3aa805795f18e0925","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.80b5d20d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ksY8JzU0NoIgdejD/5CB5NFZQe7HMgCGhGK+7hBTMQNPxhUoJ97mU4SaAmI3Za082T2c8gElUwjhsH+3w6cf2A==","shasum":"d76fcafd59a0a6ee54ea436b3061befd55e164d7","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.80b5d20d.0.tgz","fileCount":41,"unpackedSize":627640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNYPTCRA9TVsSAnZWagAA33YP/0N4okb1QaMkz/uPgXbw\ngYB2uH0AhUbw330jIU3rrTsBxfp3U2QhmSkYQG0oHOrqLW5vs4DMrohmhZuy\nX4FNcmoIJ47SHk2HuS3NGQcW+YRypbRQT65tLNjru/FBi1izhslnakqtIgek\nkxr8Kt12SSRFAdGse1MfqnfK+9/yyIf6MplwF1zlfV4ETbp/1QV7Ovl+GQmo\nwhBBnsrXFtwfpEqjEyUYolgK+tCAkBjYC/EjTwIIj7urx6Lz4+ijdlghQDo0\n1vL6oma+eu8HhRe3y5CDOph2bDiuv4dqDxLUKAAu2wQyjMwiEyMN0ikvHScS\nmzO7dYKR8Dvr8HeQe/c8MaDyFACKyMI/ffBi122vNv3eW+a1WG4yRytEU8U9\nzaftMGV93aiP+Vjv1amCcfxdY4uohX3/C3WrI6+VjJu49SiHuU3dQATx8s+w\n4qCdq/QwVoamypJSRwHM748pn+dtAeMTR+fBq5NrXKg9WTq1lyLrBoGoFfPz\naEExCIqlFD2LYZCXiMYjbw6SeqsPE+BPaaxasle7MYoSdB2+FQw4uNN5w6rG\nPz4CAt9dozRupwSBHu/rhRvG3AHwOLZb+6vhCzVwh6AN6Js5r8DVXOEzNkKK\n1515U1pXMzP7ao3ZNdaO0/RwGiAsrvqfr2BM/K6gxNg0Pk0tnJDlBM4AVS1Q\ny230\r\n=5WyB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCzUhHZqi3vFUcO+DVGz+abQFZJ2YOBb6ADmW8dVfZyQIhALf9aaFooy2lFBHMUL/QMSy5y3BnRXeOxG9Jp6kchm7A"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.80b5d20d.0_1597342674683_0.9331226858448534"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.758635ed.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.758635ed.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.a1dcfe97c.0","@material/menu-surface":"=8.0.0-canary.a1dcfe97c.0","@material/mwc-base":"0.19.0-canary.758635ed.0","@material/mwc-list":"0.19.0-canary.758635ed.0","@material/shape":"=8.0.0-canary.a1dcfe97c.0","@material/theme":"=8.0.0-canary.a1dcfe97c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.a1dcfe97c.0"},"publishConfig":{"access":"public"},"gitHead":"dca431ba367368af1f858369557a0bc5db6783e2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.758635ed.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-C3zg/KMi5mMtcHW/D7pkCELnBqxir0QZxQc8GpCgulyQReKPrjaV7r23Jgd0FSHeLNJrI+t95ZC13gLGtYtyaw==","shasum":"2c57b23ec3afe4326d9b051d4b5fcc5f30d36cf0","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.758635ed.0.tgz","fileCount":41,"unpackedSize":627435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNsceCRA9TVsSAnZWagAAHkMP/A/ra607XsfoztAJHFjp\nZtGxUFX5DHgN1rGpoC2pPQg0DalgXUKrj02qI3xzDt+w7dCnWdBkZAywt2oy\n9M4M6AFHfXzxsCJIq7TPNYg6al3nDZzJpSOGQdJaUuicYNPpgg60TSRCeN60\nRtecfWDCWCGEq3WRCbsS62jaaWM4B88OZUxJ+mSNxffsP8C9eZ028G8Y4Tdm\nm46d7n1XPZNLmlLxsbtD7MdpbpnlPusoW2zxZ2y9afZys34sTURSfvzatYXy\nsdSlgCO43Tomng/aglUX90aMCRzUoTSyN2j6+XuQs7apjkvgfurm4NzeyNQi\nkfv5epO0CiEHHRH1+L/jvZ69zylF8YCU5fSVOvJ0I7mJIyQ6It8/Ki8kneVN\ns8Cug4rp8MJXvj0+lueI7RM3tN2a/LI11Rov0EIWA1e4j+xDqN7+iXLPwuiC\n3QkR/jZuWW/qG9KhLogroi65CuEtPd/bzvsypISI3oLXBlwb0sYmB2mZ/8Mf\nWK3n0vP1QNgPHxspvgGc4ngXAsucVgETMfdWfmRtvKw84xAER1AtOzUC+eXA\nw3xFD4sXHUexiNc++YJErrOR1Dqlvnq6XNAt9IwFBhiJl6n1rlKGy/8d6ejB\n1eLSzoE7kgpOcwPEQ6VJ1JL16NKrzYgqjeL0eRf2Ma3/B4q4thTUBoGWZXLG\nlpbT\r\n=p3QE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG0Aemc6oVqd+4kvEYQR94tBrIGa2zrdQpsJUlBwLXG+AiAxzx+gYsZ4Xe3WGegLJCZwaiKstDiUzr+x4So/Z+sYXw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.758635ed.0_1597425437422_0.28523122228195996"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.18d6b808.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.18d6b808.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.150f427a0.0","@material/menu-surface":"=8.0.0-canary.150f427a0.0","@material/mwc-base":"0.19.0-canary.18d6b808.0","@material/mwc-list":"0.19.0-canary.18d6b808.0","@material/shape":"=8.0.0-canary.150f427a0.0","@material/theme":"=8.0.0-canary.150f427a0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"gitHead":"7eb789f1eb17355bf97652cfec031e407c9e2fc4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.18d6b808.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-9TW8gkgEtPBZpMZrOydGz8spL3tEAV4Q6j81LFA44W2+gXrphbcHW3z2nos2RyXGM1YP3ueCwRF6DvgpwTvQ/g==","shasum":"ee1064a466a11d3b869a0c6047b225b9bc4a9aad","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.18d6b808.0.tgz","fileCount":41,"unpackedSize":627435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxl2CRA9TVsSAnZWagAAQrAP/R585DAAJOw6aSMjmsFb\naW+DVzJZb63TW2BpxU4yDym77YoUK0QaNd0I7pTuw6Hqtre0rpx7N4Xhgk++\n43/oucrzXD0VlRQp1MRIxfMmST6nagyF1DqkweV42irlGIIwF301syyfR5S6\nZaBasyJxj2Wm48sJjRRejWVD5CMJrZQKTukG813OQx9AfauYMzdWV/ly5XQe\nYuWRZocqMUu/zizyw3VB4ipIF+7ngC0GIwhauxnFljmsnULjh2JTjXwMmjpY\nhde8bWxiT+R0G+YhLC6f11/bDSVApvwSYpawdHLqWbSWh8jfJVPi+kYoreI1\nwAPfdZLC7pIMKSc4Zuqs2J0L2Ci75srDP3uRQmPNYeiph1OYVOVemQZqxVQm\n4xa8ryFQSheOKoZOnqgjh2Ao6FYpuURtZ9u4p36CWaFNolX9NEMRgmfBgddf\nc0cbtPTaJq1/0keCLtSXkwxWs4o0GptMoa65JGCOmmZhFmyrGCKDfTuYOOPU\nx3zhgu5OrtW6mTkJL61Gd5R1ba2wHROEtQzk4kLmD90UszaZAaUf1C/bsPoG\n34Ara4LWI2Fo+ENP1l8xDYjyJsSP+ESBCyDZ6g/z6DGmkK6L+wWZOe2CamCv\nVsAC2d6hmLNO6JvUgXZsdBP0Av5sX5xByDU5LNviPt6YAfX5JCHoEhoHpDV6\nqPvF\r\n=FP+N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICTYhHkfh52NCACJzz0hooopOVbfy/CElRcVf2oBZVNCAiEA4LPOzlG3q3/1r5A3dLwcWfEWCD/DU3XjkWtyU2XhXyk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.18d6b808.0_1597446517517_0.5153370605535366"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5f8ffbd1.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.5f8ffbd1.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.150f427a0.0","@material/menu-surface":"=8.0.0-canary.150f427a0.0","@material/mwc-base":"0.19.0-canary.5f8ffbd1.0","@material/mwc-list":"0.19.0-canary.5f8ffbd1.0","@material/shape":"=8.0.0-canary.150f427a0.0","@material/theme":"=8.0.0-canary.150f427a0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"gitHead":"c230db638d0171f7a47ff1f312ecc123b9bea4e3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.5f8ffbd1.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-oMtF5l7idzey4KoHhFzM1wjz3BCn20j4MzB6YD5diAW9oxy9KbjHedXju60luiEcKG7VheoFYSIP06z7sF5vNQ==","shasum":"928499e3568e161fc890b70b4593c90dff4fa19e","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.5f8ffbd1.0.tgz","fileCount":41,"unpackedSize":627435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOwGtCRA9TVsSAnZWagAAFswP/1KyytF+Bkm3i+SvhRnR\nzfjOWU3YDUQRkFGBUp/rSjK7+9olyOqRbxZO4aiyA8ujSjoDMZhiTLpgkSGB\n/lUGIJSIFv6IRjA+2gy/ooE/CyvOKPXtbsZXszsf8kdSqgOwZDok3U66p+AE\nIKZr6SfqoKAzXY7VHuUEpvvkBxFlRFCdguj9Vv7HEqHu1uuzwg0ow4yjN62W\nXRV0ZZMExDVqegXQKI4/GSnRdKPrEkO5cE6jqgWCbi2Fr3oOh7VxAxVQGs+u\nERtWQDY28E/UcgPyuOiRmPck3/ObI9HjSQtGmtuWGoZg0gQa+mEBjG1ScMuh\nq1ylYVgpks5anR9Q2ov7KhhnBK1HOo+lYxVYgUmouU8eSgMJmF9/9oZz/cD9\n/oagsZE/2UDAe24AEn4B7axWXsX+3J0T/67MKd1B7iraeunyuZuzAxIvKmGH\njbHAnzS+uNv8zsRS8IzS70g9bk8CxQXyjZiu5yCE+/JRsphTNbymZAba5QHy\nqnKke+GzGXOwg/Tu/iKSVkK8ciyCV3BM+7rNZXPsZSsG66bT0/2avi9JARFX\nzsSfTLK4U+8SD7VFGV/yIJMTO+UrRXj43GKoL3GzqVhyH5a+/7Es9pEw95AA\nUT/Z3dhHl1L4j8BR17U3haYLcos2WbusonpZzSQhmSdTRcMdq6g2+bZcDZY0\nEiMi\r\n=/Zs5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAnawvkTOGywQDiw8E0aEVNpdS5grX/9m85H6weONrWlAiBTQjQ8RRTo6Q1Ir7HRr/Zp8T3ydBC4rRK69EDQtPxyeQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.5f8ffbd1.0_1597702573337_0.8343460819898523"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.8604d59e.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.8604d59e.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.150f427a0.0","@material/menu-surface":"=8.0.0-canary.150f427a0.0","@material/mwc-base":"0.19.0-canary.8604d59e.0","@material/mwc-list":"0.19.0-canary.8604d59e.0","@material/shape":"=8.0.0-canary.150f427a0.0","@material/theme":"=8.0.0-canary.150f427a0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"gitHead":"6b87d240089846147032623e302121a478088f7e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.8604d59e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-6rRnbxAmJuVN7y3oqJ3zOXuDawFfihh2zEuu9DRtSRrfIByOFwa4SgHVEozxLbOl5bUlltGerUNph59Ahce02A==","shasum":"7660e7e559a1c260860f426332b831710e75b1f8","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.8604d59e.0.tgz","fileCount":41,"unpackedSize":629020,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyjXCRA9TVsSAnZWagAAmRUQAI0a2XuSAuG8FO/vvMsz\n1dTPT6Kjrz3GmyymsVRn1F2El03B+x1mRwrIAdS0UE68yh+gNm6oB6wk1bfM\n83XR7YEnkMIwzAaEddNc7tAr1x8bVWLrd+pcPykCHLEPr72YhHaxeoPHMLxo\nlyzW6+3mNMparOYKYowqkiK/fYoyVbsS4ltGnvg7biEZPBFhg6ogk2f5XS6+\nk63l7O5whWgu3pi10RCPFJibtioG3Z1YM9Z7HdmTdl9qamBMzN9EKrdhZ7XK\noB1KINCi2Q24ohdWrneiLmse9Gycusy+uIDAN9COsZcvjo6CYYXkgTuEMkXy\nZqhlmSeaioJzgVnQxsA9TxzC3OAjKpK1N+XmTvxlpXhZ0Y7WvmVuJUMq7R0H\n/E1aX5X+EG3Gd1MEgD4u3nvc+Eg4J9W+OkKoYZPRFt6AZgQNZ0OYw1meUJ9A\nRyWpln36hPl0fIwig+mNz8rkFKrb/b+/c8bhdFxfPonVTxyau5OaH7M5GxC7\nbMElq0ZP7yKz2YpO0KWk2TbqO4ClZ7tzkpIks12moSSwnSUS1T4TDaVbVDGd\nTve4M2Wv3CMPYyu5zt0Ad88akHLo4tipiilJMzd7Ls+NO455x9xC5J2vJqK4\n3CCQhwtFatHOLYznnsZHdReKKB+Tn9Asr3Vrpd75jUJj6E2+UKdq+CKLMqR6\nsUTg\r\n=79Ps\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH/ZOSxscOu2yG7Lwwijm5qqI/Kuw8LyZ80irm1L46PyAiEAkzR2gyOilvpcqp/0Ap+NArFrI70K4nbcDT6OlcGVvco="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.8604d59e.0_1597712599421_0.03610941131712542"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1d7d5e34.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.1d7d5e34.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.defa599a8.0","@material/menu-surface":"=8.0.0-canary.defa599a8.0","@material/mwc-base":"0.19.0-canary.1d7d5e34.0","@material/mwc-list":"0.19.0-canary.1d7d5e34.0","@material/shape":"=8.0.0-canary.defa599a8.0","@material/theme":"=8.0.0-canary.defa599a8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"gitHead":"e5b1904570278e726a75457dd1d8c9a30c98669d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.1d7d5e34.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-5TQFJpZglRzHbKj/EA2FsgwqYKCXvZm/2nqJ2RF2X2QmGzE77kuCLWIBlIgomJGhmjHKyXZgoHj/yfP2VEPdEQ==","shasum":"7108780775fe9392a8863b49b50717c37b20b512","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.1d7d5e34.0.tgz","fileCount":41,"unpackedSize":629020,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOypNCRA9TVsSAnZWagAARF0QAJpD+bxOik7yz45K6Olo\nxDjtnr2udmRDZQ99eA0KUDmHp4iDbbwW/4CVTGlPDQnXrNXW1+TQAniKZOGY\nd9Mw/Eif/ST6Exi52wKrYs9hH1lbPyPCM5OYkIn4NWLla1Mb6USw07W7Cs/R\nBDmM5cqKa9zYvxN22QOI1ja4JdGfG5kFovrNoM5iamotEtWChN8YreudAtEP\n3lS+InVXnTnAYzRg1p2R/SGzXey8BC1JmSHjXRPC6QdLCb02y60Tg+lA8yWV\n5Tqpwr72FMQWGPy4YNZ96ylMQDZvAFh/ZXx8+lmBRN/M85+6TneXN9hWM+S9\nZzNIRky3SK0l4kj9xL8TMnbcM9dsa6BNNwKYQCP73L8x2HNnEjStuL5K9zk4\nOmCmd2m1+YBqoKmgaBRsicJ04cJmCy1BhANFIt6+RHizZOnNpSTrO24mkdX5\nvD5nAH/Gv9VfaG/OOe9B6crgSu2vptL8BjdMaxsDysTfpWr4bXxhJS/HKrnW\nIX+0pO+LmQtanoHpVnuOCwMAW9+xrccbycI1PSQ+aFEL8A7uoX5k9LO8XtGR\n6EDQGU1ZUmB0icasbQw9mziXhML2ObNFyaTejnY4rPf4ddDlJNmZHYM5cLz1\nacQtEiJhIRxT9tKdJfRcP52ftcXd1utrpuS/+s6cXKWK2hDuXDdKC2Gz06XT\n0Gvu\r\n=iXFR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBDJGBThQmi9LeFdUcBbJm7/LFP50/xiqR5FYFMeOzZBAiBDBOvS26G3f9CCcBjsKjpBNZycD7+jdyd5UNxYMdwHAA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.1d7d5e34.0_1597712973032_0.6460754902043997"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9cc95c07.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.9cc95c07.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.defa599a8.0","@material/menu-surface":"=8.0.0-canary.defa599a8.0","@material/mwc-base":"0.19.0-canary.9cc95c07.0","@material/mwc-list":"0.19.0-canary.9cc95c07.0","@material/shape":"=8.0.0-canary.defa599a8.0","@material/theme":"=8.0.0-canary.defa599a8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"gitHead":"48f9adf6b09d7b2532669f3bb466d2dbc3970990","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.9cc95c07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-FX+Mu0wDWNlXbXwP/luJ9JvyimpANb+RQTwFcVm5PJV1B+xC3T3fSXMsXYma3/01K8TfVV0Ic79eIIOh7P/Y3g==","shasum":"8d9bee5b226d817f2b30c77cee09d4678a651dac","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.9cc95c07.0.tgz","fileCount":41,"unpackedSize":629020,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOywYCRA9TVsSAnZWagAABDsQAIfXht66L4/3TdHfUIp2\nAiW3MMkw08pUCdiXSDSXiaGL1HzdgDQ1GpC+3VMEtDNNbWYrI9bNtRv71Pij\ncg0d/SB91cI3BCy2DsdVS/GDG8iWdWdTnLwhgyAYdbiyn0qLZ9bD5LAC1nbu\npG/UojSUpvc7IbbMSVq7xspe/VHAigCaxqV/Au5V22mtmEh7fJaphKSEGPUw\ni3t6Hexw8C15WsC0A89PmIsPytuk7B/OYe78IPRHYkCVQsT/48zYgUjHn4CC\nITV8pWL8SUPwlVivaWEGHaUDXyu0Nz/4nJdlw0b+jGosDCeywOu1RlxtMHjd\nfdhvZvnerMxTurQTVGx0/xEefdG1HkmcHO3sDLRjinwIEY/1e9RExohS+fnN\n/756I24c67kMhMat5pyvbQsMqCJMcrnYdCJ15MkPotnZS9RgXbPR231y5vxp\npi5/25PwZWwwGYOc0KlndyxJd+EjLs1rsVwFIJXyOR/iBrTg9J5WXwwEpN+M\nycKc/e+5U7sMGjDsrjsSu6ukx3lXnep2jGpCGeZjci4Xwk1QKCnyGSvQEoSL\nEmjSyhQPJXLhE38762cftU6hIc2sZ9v7lpR98aCkGEQbSannxzhA1E4t9HZS\nyKA4/dABboxIkvUMck8MlMTti3xgfJEwbfngDipy5dj9sbxcX81HFgOFWl9C\nPq+W\r\n=Fm19\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzv+thkPfeDuxTyjDOAnSQr+Hj45+T0sy8k+VbFhvKbAIgc1/cZ1oEXiv1opa0NBaVKQuLto8oOZPvkMsKWUgyzWQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.9cc95c07.0_1597713432318_0.035197496194799394"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9f65ced3.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.9f65ced3.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.defa599a8.0","@material/menu-surface":"=8.0.0-canary.defa599a8.0","@material/mwc-base":"0.19.0-canary.9f65ced3.0","@material/mwc-list":"0.19.0-canary.9f65ced3.0","@material/shape":"=8.0.0-canary.defa599a8.0","@material/theme":"=8.0.0-canary.defa599a8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"gitHead":"5aed2922c67f2ad7133772e74310e121b406dec1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.9f65ced3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-x5QyFOxHpfutLLUm6RgNXEVsH8RUUJLw8sxi84MCJt+k/pmFcVh9J62saFO1+8Zgrxtpx+oWRa0qXbNMyEOm0Q==","shasum":"433af7ffefe6a48e272f10c2497970e777bd34b9","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.9f65ced3.0.tgz","fileCount":41,"unpackedSize":629020,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPDc0CRA9TVsSAnZWagAAFv8P/3vgLO1er8JjDbPkmx3R\nekCePN4JSkZPvhY/CVpOKm2x2QImTC0YfP3jF8tSLcXXjWdXMCclpyCgjCdx\n0OlzB9nal83/9KbM2ArarEbk2Mgk5nkqDpSZbQx/LFBGC1eIO+p4Smpzhu3c\nDGu3/UFrU84QX2ld1768fRTFcTvKf0w2tBrU6p0LyzZr+j2K4gANbiFHi6qi\n2m/OZWf7IUby8yJyxQp4qQKlp3LjqeqgJA+JthER9VOErb0qFSWPpt5JLLjA\nKvWeT491sh41+kZp+HHp18Uc7Anv3EET2IzaynL6dAHdHPglN9uv8x8JJbLI\n9WscP/TUbDyYNmP3KGTltbnGq/kicRf60lyXDo3Wwd2hA9ievvdL9HnrSwUl\n/QaECbhNnMLQhC97GwbHNc8qnikvKrhieIoIzt2dcrMJXI2jec0DLohvR8iQ\ngjc8r8eVQhGSXnOOl5sc/0rNijuHMI1FafhwJx80pE60AyfGIpj/lNQVz/rb\n99hWRqpbv4b3lt+D8I+l+N26LtaOVEMH5fBI3pcvukGLKUunOTbXghsbBLGZ\nsO3lUtmIEmiFcfhKUbNluKhADvCLOaFPwRw52RksoCbbllP5BBVOeub0fw76\nBNPChmpSFcHk6Y7w99Wx+qsOL1SlGm6iPnSsZ6ikgAFOxChCRsNEmGc4c7vQ\nn2Ot\r\n=y5HF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHEk2BhLZj4uKKOPcZG9OVAR0rMRX1pgq2l9m3gb1aqAIgZK28nz+o2VbW3uae3OA2PSpSezPPo1oiBn21OKmWyJQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.9f65ced3.0_1597781810113_0.4867064987911438"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5962b365.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.5962b365.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.66b8ed7e6.0","@material/menu-surface":"=8.0.0-canary.66b8ed7e6.0","@material/mwc-base":"0.19.0-canary.5962b365.0","@material/mwc-list":"0.19.0-canary.5962b365.0","@material/shape":"=8.0.0-canary.66b8ed7e6.0","@material/theme":"=8.0.0-canary.66b8ed7e6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.66b8ed7e6.0"},"publishConfig":{"access":"public"},"gitHead":"454d30885df0a3162dac8184409307ee571c6215","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.5962b365.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-xgI/CZgwvvTcDc8rPtl68cgMsz8geT3cgIC+GP2i/SFTFFd1dCEqe7y78xaV6mwJtcj2+sE5fwgY6yAgHeXJ2g==","shasum":"869c54f850affbb6547eda9f0c7262dd356d42ed","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.5962b365.0.tgz","fileCount":41,"unpackedSize":629262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPYu2CRA9TVsSAnZWagAAUrgP/1MHZdAwnLl+CI4yglnH\nj/pfmyNH8WPnoXgc6rOxzAvKQCwWFAor4YNEp5YwjTO56hZVmDvXp52HBNLz\nhWiCszMtMAusTG20tYqKgEYRbuLDnAe2qtDO3LMyY0HGkUaSW4eg9pyYSrEM\nP+RhLGA1jZm63j+H1FxCiPLjmaMisLitCqlwJfu8/wWcOU8gHOGaRA8FLnkQ\nfsG13TuDHuRwGWeaZCaNQt0E+0k9nW3OWMrazO3pwDjJpWCvvIxp1ET94Cfs\nn0rqMBp8VWqFvD6AGcxkwyZ2gSSK79JIWTitbT4LLldoPeWLXfUW87C61ddW\nhb2Y3JpqmNM/ViyTtSiu1BmcT8oSl1pFqpUqEzMHhX9rFxBVXPZVts45Dvb5\nbs6aZampOLjK6bCZ9JaeND4bzEZD48BLsgxzqO7an/8MNpE6i68DPERnlWOn\nbbacFvoFZ5BbUt4K1eQLECiunHMEH+XNOEs8KNyFEvfKS8n645A/D2uHH34f\njZ7ZpuVh9J+e9KjlAJhFjIWL7dH2EisExH40c/DaGEFjQrrjzFCUZo+OK0Ez\nOxT5Su7yxCjLmWM2v/dzQFsWwQJw2ctjkTSc4f0t15ho6BX05bSAWJALZqRg\n6CVW+li6gOhH0H2LSaxWdl41wQUuPFZ1ZFVMPiDYZ/Xc2CLv5ZjvpzitH7Sx\nsQWa\r\n=N239\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEST52emSR6TMmljEI1Ht9ysmPAX7FOvUk3PsXbcrwC7AiBxezrNBy/rEzSYtKcnqGR34K+mWCcOyFZoFVHB6mTTqA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.5962b365.0_1597868982076_0.18252698086311137"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9c9ec756.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.9c9ec756.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.da72839f4.0","@material/menu-surface":"=8.0.0-canary.da72839f4.0","@material/mwc-base":"0.19.0-canary.9c9ec756.0","@material/mwc-list":"0.19.0-canary.9c9ec756.0","@material/shape":"=8.0.0-canary.da72839f4.0","@material/theme":"=8.0.0-canary.da72839f4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"gitHead":"4c887788f2cb30e8b788a5cb0a1a13dcb78a0961","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.9c9ec756.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-vq1xHAVOtujVp4HOkUqPmZ6xUyALzemweM7W2bGG+xsLeCuFreKdKHkh5cy3g3GBlvdXUiMInEfYafVaTFZUCw==","shasum":"fdace6f989691b6ec46236cab27affefe90083b8","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.9c9ec756.0.tgz","fileCount":41,"unpackedSize":629262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPsdcCRA9TVsSAnZWagAAAXAP+QGqA8AKv0pqCBVL4KQi\n1Ot0oiy8yhW4fyxIgN2l46ROhvwswZ0pJZXCXKgDrqz34h7bR/2GEOhGmzwB\npc0BAh0FJ8Hc93Ylx/50s9glXdmTXcKoN79R2iOUVDWlJzuvcHjb+r/v7nLG\nGyUAf/4Hsqt/w3aE0NPaoWsgeJxEjh7S6MRQqMV8DrSQHFpT3+ut/dU+mcaz\nth5ie9rWP9fsy0azDXRsASAbgfm7VlvY5h53beMIyh4d/wKBs0UcWMhbbkZt\nOMy+0NLCNLfPKGqMAC7bQmtvjSvxEt9YhRbeOvnt2/0HLqy2xR+wqkNHe7Wc\n8k6zD2iJT3U7z7TPNXrVEq6tL63LiUZ6DEk0hIIVSiF1aB1d7RvVRJ++a4SN\n3Cn9t34KhU1HYzJPvnB8PgiTi98AGCeBTj764bYm9XZI0V2I/gpaibZ3PIJq\niGavjtvxZUrw3pzRHSPjzmX68FIo8C+EYC85IGzoBLZzH1n6ex8xVe8s/M8c\nStw9pUqVhuFyCY9UPgTJL8gADiQOL1tUABLyJsGroY9fwAtsbWkDZ9ToU5wd\nzRkbOsJHEqg20/okfEvzBGT6CwiGPFIsiPseJGc0qWP2zHSd1Lg0xSvDJdtB\n+Yw9qIKPUzSJJKUrhWMscHzH0f/ZRDHfnfIzCiwLagasXvL6gZRrlt49v+pE\npgy+\r\n=RW7Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsMBnUKTbVagFN0JiVVHPGa98wioZQBBN0KjblHojfRwIhALaAoTf5tc6HQjtvR7wkwbzTQVOoCxCzQ65e3VwYVuok"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.9c9ec756.0_1597949787971_0.6581667515598053"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.fa0ad66a.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.fa0ad66a.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.da72839f4.0","@material/menu-surface":"=8.0.0-canary.da72839f4.0","@material/mwc-base":"0.19.0-canary.fa0ad66a.0","@material/mwc-list":"0.19.0-canary.fa0ad66a.0","@material/shape":"=8.0.0-canary.da72839f4.0","@material/theme":"=8.0.0-canary.da72839f4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"gitHead":"d4020241262a9309827adc8467ba4c499bfab71f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.fa0ad66a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-RDln81LvzyGFPdR0IreS1CjJdxVdbdQc8JlwK070RIn+jt/CTm4+Ghb+MF5VbBGX1UcLuXp6eTtlzE5KsB1xWA==","shasum":"5fcb29c09bec8ad94f2638555f3b58091bdf5fdb","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.fa0ad66a.0.tgz","fileCount":41,"unpackedSize":629262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPt6aCRA9TVsSAnZWagAApP8P/iuJjIOv98tlEvqBszr+\nCe94AfFgz6oIyUgRsjUvSOj1GdA7EeQZKv2fD4nJa4C4tmTx4J5y7PyKDiRi\nb6z/oL+zvvOzroKlL04aVWRUG/HWugnXpDRM2lPRKmkqRGrDQUy8RL4jOMTd\nRPUWlCPa97u32NQsSQAAk4AGBhF6s/Jk9uZiIX/OBY7/4sqnOchi8LjnKqJf\nw6Ir7LEmuJU1ry2cPwt4/I1TJ/4SEpKWYVXj4lDVhlTtwD89SzwuXYQ0fXNa\nNBTWXZkfX/yg+fPqxw6J6/w2kmcj7ysJPpxUXfeWhxI0mrtT9iig7mUnwPIR\nwhf1VAox64yvf56dAFTOnFqPFKHyKHb4KzKR8iaWXUVr4k81TM1+FDzMrw0p\ni2v3c2bLGWS8exzqWckd55f0UgKLX70dS3b9dh95glBKOlSWJ+jpqS99UwxW\nCAY5ksf8LUyi7tLC9VIxyPGo6cXIsDImaMfv5OWQ37YR2NqDVqu6jmGHB5ug\nHV1k4CaT4IpCjndL+5LBK/VZ3NSdv55zI7sEvexV1dTcYI3Rjqbd3GrEpxgs\nGQgPkRxHxoRC/qylGls71hN33D81GoF5vzbIr2bOfO1hWfYsyXA6290ApCqp\nc69zHiNb1fVe9sC+kj1SnJCdaY8HQXeObkJhfNrmxN8npiAiu1b8fm56QZSr\nn8cp\r\n=1C+e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAMcL57P95hBtzv9IC3CYxGwodc0qc/WTeWsnChwQDmrAiAOEG0bcudFyqHiVz4jUIOY5d10ruN2ZxPfzk782FFmMQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.fa0ad66a.0_1597955738219_0.6765248269238868"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.06ecdd6b.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.06ecdd6b.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.da72839f4.0","@material/menu-surface":"=8.0.0-canary.da72839f4.0","@material/mwc-base":"0.19.0-canary.06ecdd6b.0","@material/mwc-list":"0.19.0-canary.06ecdd6b.0","@material/shape":"=8.0.0-canary.da72839f4.0","@material/theme":"=8.0.0-canary.da72839f4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"gitHead":"35a2331f3c8450d35506d4f0b54075d121a2670a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.06ecdd6b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-DIEluY5psnA73H+ogXvvXUUDPTb/U8Cb5bxx8FKYYBN9v0XeISrrltMBGJ9nbU+hAttDgcx/HF2ANhByvD3q/g==","shasum":"3d9cdd38e4aba9420cc003f85e055926ff542537","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.06ecdd6b.0.tgz","fileCount":41,"unpackedSize":629262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuxpCRA9TVsSAnZWagAA3E0P/i3BrCgUNp4GyAr+BzTB\n6iMNTh3FxGn52QV9pXDZ+cjHltxmeX+EcjHVuP6MJQlhC1ajBdsgzF5hpimc\nxT3iIupf0HA4YBHUZXOEpo4pHegRl+ZFHHnMT3QNcbLFbMKLC0bVP9QcMZ26\nfpMlhdLsmY/99D+Z22I+sz6bqpyQV02pXY/cfoEOt+aqyBOvbY+n+aJVO1H4\nSMoNL04Dyt4ACw9xLhrTR13TcxlmIdo4WNfc+wnakc22dWSe1am3WD70sI1z\nAXZ3OpR5ONqhgB4qFYsJCbPM8ZL0w00XMdqlXDAegTNqBDP00lvTr5JiX24b\nfTvP4j7TzsmfER52eXDP1N7VWLSdfWNwvPpVVxmyAGt/eMWB1v2v/mv4GOS8\nc3N/71iKvw1ZxZ70wCQwUnYK4ERmIyaHCYVFwS2TfF+uCSZYHSBRGDtlUh0l\nIyfOKcuLuHlaLs2gbCRaATsvoAeGBa/t7f0cUlFmZiOYNclaAQ4qQhOzWrHW\na1HqBS0GrQDu9mBsD33deSENMSIgrrKsD8NQ/ux7V95J8le+6kgGk0iWJOZi\nXzwkGb/vIvLRxYRGiQSmEL/ce7WFaPUC916M7OEieM96tOHgYuUDX1hIrH01\njKwXPXSNlfms+IKB0BLZMo0E37kN3xFBKyAcVw2M4X5p22fdJ+R8cCRJlI3V\noNRI\r\n=zE1B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDj4bqNTpIxHtT42PcMoMGhn9hsfcf0tazC3VYzCU0BBQIgFrzco61XZdc0SSo24QVxhSval8wKsPnY53ySRRMmfDs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.06ecdd6b.0_1597959272925_0.7636529017217235"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.2bca2318.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.2bca2318.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.95e4eeea7.0","@material/menu-surface":"=8.0.0-canary.95e4eeea7.0","@material/mwc-base":"0.19.0-canary.2bca2318.0","@material/mwc-list":"0.19.0-canary.2bca2318.0","@material/shape":"=8.0.0-canary.95e4eeea7.0","@material/theme":"=8.0.0-canary.95e4eeea7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"gitHead":"2e3f0ca806ce8930df2251177b8dcedb9deaa8d7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.2bca2318.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-VOwYZ66ozFpICCtW3iqxxXIUUvJxPKD0p/etn/D2oDZoZUDtw8GHuDuM/ovnIdNIyJx5amGQgiwzZeAimJix9g==","shasum":"caf2190325b403e0433b60ed5b5cb75a126bafc7","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.2bca2318.0.tgz","fileCount":41,"unpackedSize":629262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQAoDCRA9TVsSAnZWagAAlTMP/j1FLe21AAcHxGnKk0VS\nqpBu4aSLU35UOsm9futMYAUX9Nt4jtaEbOeR43FX5pnOZkgY3DvvKbnttFgB\nrcZ7Kn1+xk/L0Ns3WpuMV57+ErMD3BFWSXGeyf0G1ZAnWA3HEYqzywU/8uwj\nSaQJo5fOcuLXgeSgNTeSj7tBba62jdqil9aC1Pq7VthVpP1xFYIgmx/zPoqu\nrYnLR8Se3LXwvt9UYpXLaAzFXac7wKAo0shfC1hm00uymudqIOUizZJ1wWod\nR+TQxqVlTDchFdesst/yOAAT6z1szLPE4Z94CqS5a2l0e+/S8cejbB+CbivO\ngsOCw1CyvuinDa52uppQ3n7W691rFq6YzDgskXy94p58D8z5YVaFi3nBBEsS\nguyoEjcsMCbN6h77VLLt3DIi+7Rzcdr3mNthzbSyk6t1wNf4B7WWJfmxnUdb\nuJzupufVa15c3+bxkKL+6yV+aQyNHd9oe2MeOIY6nZ/PYDmy19nPABEaPKXM\nnvo3vL1qHrd3/e2cQ6+/qKqi/kZJx7LjlnSYMqno6vRCbrbQxw1mP45lTO09\nr7g9cJypwCwMFFofvLBAYcPzsKqTeGA55CZAgmTPx2vKeHoluszfkcWb3pKP\nBuq0OF3tEDxV0eTaI0gMVH3Qzh9hJv0nzUB109zDANN4t3fBaoDGtb18FpWF\ng9zm\r\n=m101\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3ZGww+U9Kwg8q08YT9vwGrLg/sin4Izk5yAfpysm7CAIgN1avNolhhoIYp863rj2E3dZU1G/bEAbkpuG3QfFvuL4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.2bca2318.0_1598032387267_0.7755440697903582"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.6aa47265.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.6aa47265.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.95e4eeea7.0","@material/menu-surface":"=8.0.0-canary.95e4eeea7.0","@material/mwc-base":"0.19.0-canary.6aa47265.0","@material/mwc-list":"0.19.0-canary.6aa47265.0","@material/shape":"=8.0.0-canary.95e4eeea7.0","@material/theme":"=8.0.0-canary.95e4eeea7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"gitHead":"f13aa269065b757dd289dd89367756db80da1596","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.6aa47265.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-xDuupjUg40i2OKZR5yHq3PRuMCJozQC6j/EBC84dtac5l3Jmv3BepWm0l8keA6DvQz6Bmcj4pafgNC3g9W5ceg==","shasum":"2a3aa460bad706cfbb67a9c3d4a05b1d4af97d2a","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.6aa47265.0.tgz","fileCount":41,"unpackedSize":629262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQA+PCRA9TVsSAnZWagAAHuwP/3JyLz2tI2r+cx74y5cP\nARvZgy7rO/mTk7CTvOmbiAXv+abLmKfhpblvOqW0AksYlsgDV7AhYWrfnHjb\nBW/vbnnYAF10y1UPbCIXUVaDi+DnV53XM0wzs7RUq0eCX7YKLlsHxD0a6Y72\nv/WQJDL/WHNMiCzdz360rCLUnqJ5CbYwWngnyz4yo0M9yMrj1FRkxG96n30V\nFahNHJ/oOi+7vsZe/Q1vNrYGHbyAuR1p4bNIYdVRp7ED0gu3zpuiKMdbOeRu\nV6jEO2L0AB5p3Bp6mWRRTfmTLT+tdowSC/L5NE+MpO7oFYrqV03zrcih6P1O\n20Mba26Y7wUxiRNkjv9v8vR55yFrhPPsbABFMxCKTd7nDC3IbAE/c+3pDsVW\nMwBVw3vmmZQ0NpO+2TDFwXOs/5zWfVfksNvo+Om+SJSo/nMkyXPUAtppahq2\nB5gkx2hHFYvaONijuEpnCGunStJyq9mU+HzugvHjmEaQyZwofUQNBVvmz+t+\n2Hw2UTqKOFljp0jlP3mHzbC23HQ2HBNQEnsExMcUgtBCNO7uPHrvds7HB1qp\ncOqquO0WzY3OLo36xWtijAzo9q+Fy1UyIIOZzLK47Ya1YJcbKsksPJait1Co\nhSaIwD4tHEMpywjev3KaHxjSVynlDiQUTZtyHRbTQYjzpjSGJUDMofdW2P97\nKgQ2\r\n=t/XA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDESFt/Rfbl+SxAAqKQUT+3aMTJGYYQ1wUhTG+oEvKkxgIgMnibJQwdzG7dzX1igGQSn1s0O1ZtXyog74zsYw1X9W8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.6aa47265.0_1598033807128_0.7435316367702214"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e7202a07.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.e7202a07.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.95e4eeea7.0","@material/menu-surface":"=8.0.0-canary.95e4eeea7.0","@material/mwc-base":"0.19.0-canary.e7202a07.0","@material/mwc-list":"0.19.0-canary.e7202a07.0","@material/shape":"=8.0.0-canary.95e4eeea7.0","@material/theme":"=8.0.0-canary.95e4eeea7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"gitHead":"9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.e7202a07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-f+QEDvD+REBSjg2HDE7Xb+JYHjB8AKBKrAzHxgUcqfdAZKU82pswsJm1AQqXQf1r1MqNPXDh3tUcm23GQ3TAgA==","shasum":"32b03b2dd48d242c1734daf922bc2aa56f23b61c","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.e7202a07.0.tgz","fileCount":41,"unpackedSize":629262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQB9hCRA9TVsSAnZWagAAaEIP/iJRJWHy2DZbnxZ7iwQd\nBKU3WSkUxfebSRFE1kAB79GzWC5faU0XcTgv6yM3aOC0uTYDVZyTjGX+YEYa\nkCLJ+eMavZ4X5sqoEd9oCCS6xJW5/dTNs9qI2nfDKicYYKxpsjRimktmcbXv\n0IZ5eGPAt6VdTXjzIwxn8Rvs7gJr6MoRPfWQ7dz8KXERYqcZaJcJXc5TGnc0\nCKXfCeBDm7swCnxchLtk1+2QpTiHrNm34FDRm8Wr/N7GwaRmgP2h2HJNHXA7\nBNOh7Ll/WXBD/CWbhmJVPon/duhXkXttI2d4yA2frz4hiQwGA2ZQ5ousAofD\nFCYTPhVIEntqyD7FTn7V0wKHNDikmWTlZ6c431FjtkT5JBQZG7S/wYK9g/vk\nft8KfH7Meijm7jpHpFFb67rqgaNUcUFgjRT6CCJRtmPaUocTTJ44DLOCSwYF\nHASaj4I/MF7BNMveOJyXjigO4MpwF7KlcyvHLHRv/8/kam9lZqYum5U6COBh\nUZDMdUm9uSq+BxwidB0zY2N4BzwP1RhWHiY1v2iEoIFvlNe8Fu4lmNp6Zo9K\nKdCXlqRCCKP6PlL2a/c7TiTtQr4N1J0aQu4SEvrdy6yvsJHe6SkVHqxTJOON\nfFXTTGPKUDAjJwNn3UGC9LQPr9o7kgNXrOQZrp/ydf7rJTrlAu8BusQ2/TDM\nEhW7\r\n=ebeV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJDK8oi7e1OEqS5YybQAJiL35h0CiSMOYSPHjfuqc23wIgE4YiKZHpNS88h/rSFMlDU2a/eSZ17lxMtl8NBTcQHAg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.e7202a07.0_1598037857194_0.6135989256922407"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f208201e.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.f208201e.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.238216fc4.0","@material/menu-surface":"=8.0.0-canary.238216fc4.0","@material/mwc-base":"0.19.0-canary.f208201e.0","@material/mwc-list":"0.19.0-canary.f208201e.0","@material/shape":"=8.0.0-canary.238216fc4.0","@material/theme":"=8.0.0-canary.238216fc4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"gitHead":"c666b3346918d8521008d20fa3c20b4cfe3ee481","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.f208201e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-2vDiKEojML02DCXqwYy23hbN2FnRyrpqHjB/hO5hIrZMMqxGE8UevKpPPVPjqffWKHh0Qy3NFwlvDvIAkfwoug==","shasum":"9e040c95cf6fbf776c413a400766c4ab685c72d7","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.f208201e.0.tgz","fileCount":41,"unpackedSize":629262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRA8WCRA9TVsSAnZWagAAu2AP/232alK+qHaVTzQ8PhA3\n7MV4fkobtmsmaCScUOrBFtqjCeLrXKZzJK/G5ySFjheCnpjsvI+oF+vDqIYM\n2PTOgCO5p2ijGtBkVJPxmAjQHnVVkS9yYY7Wy/zOMzJXBf7zlPCzdsXeiDXr\n3Ul7BRvnmp1ohYnzba4f3ovzOij4s1fQPWguAWx8AkiDWuiaPR10tMJLZHAB\nIpbbxkVz4TeuSCPYSk2ka2fNADhUZmFbD3leNIZ97m6Jt6PB0noAocEi2M3u\nVWNAh4x3CZks9DniJC7hgFyDz+U2AJuCYCCKTrTLdx8GXBBa4apIvmXpLLLS\nBgDRMN+5mjdhxDz6/qLnSVkna9dz0eRK2xZeD2iZFcbiI/VQWXuDM2kjdjk4\nQOQl66VgId6z7J4F7fFQKydKHmQ++y+cMe5ek8hS//HL8oqp0zephBEF7u8Z\nVeevKbQJFAV4+WugwSFCix9GukFYZ572rTdF34KHj795zNw3949WHdS0yOxh\nK5jurVTUwMaS811GMZc83/10hhDAjeWOoQOygfSuT1V72NgoEj7mjXV3LXhV\nmbpuI1kxWkKbnBCimPlUSoXOMqMyfh4IKVMIANsVMZ9t1jx4YNnk6i1Fr8gm\ndq5VmprlDznbTwZXd3pbXPaF3fPgtmyqcb6NbDEQgtsGKk8smMTinY64LhyX\nJn8y\r\n=SWoP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEGMHSg4gpgADnQI2H4XP1pf5mq3dv7TDVSjeTN3kbp/AiB7axmVSflqRCJ1SYHWUBxoVVoWDsP8fxQuRXSUUhKKpg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.f208201e.0_1598295830579_0.6778954782276929"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.14a172db.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.14a172db.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.238216fc4.0","@material/menu-surface":"=8.0.0-canary.238216fc4.0","@material/mwc-base":"0.19.0-canary.14a172db.0","@material/mwc-list":"0.19.0-canary.14a172db.0","@material/shape":"=8.0.0-canary.238216fc4.0","@material/theme":"=8.0.0-canary.238216fc4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"gitHead":"dae488440593f3d8bdddcbf01a3a6b5343d88761","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.14a172db.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-OPJtm2ihczzR7yoRpduh8Y4vv9vbT9xGwBIaUsoRf45bgkgHfRnFgjV6ugqkPdkPnm8c/umySEJBi0ogfsVqrQ==","shasum":"c406acc02c24ee210b073bcc838f7a1e8d32f1d3","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.14a172db.0.tgz","fileCount":41,"unpackedSize":629262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRWsNCRA9TVsSAnZWagAAa8QQAJgc725NW/USm02KvRli\nU13ZEpeZ7XDZetrH07s8vNxMf4T8yxnV9YdeyZATyUSbJzV7Eqyw1dNpvosm\nRyjJKKzqnL97whfPBjeznZZM8y83QCYtXXxPHH+nWP2tHvqJ7hDENZJ36opU\nCQ80tDcP2t1ji8JeqZCp1A4zrkEMq6uS3+Q63SquqJuU0d80slLEevgLlQe+\nobhmw+LY6fYJBrAAAeZZW5F5GZrEHEsu8NEYr2YI1ZzK1pl6ZakX42DBOp7p\nh9RNzmdl4lf9ctifS36Tu5Df2W2pR2xifshvsknhcr238WBZxYWRlF0BpRf7\noKJ4BdCo/ASoc2nIH8rPtRHeSBSEYvpVhm6VML2sQPY3nh5rSca1SWoSXPFP\nybICgUuyFzHLH7jctBQ0vmVYzpfsrB8WbPYUJHZCQIyvvA1onE79pbP3+rxf\n3314VTWrXPgaNC9OiZs3OdADl8oeH9HwXBfcK7n3EBI7lNkgU+cE5UVCtcYV\n8K3CMTI1Q20q7NB1awLwndGGKoUkHziXRfkB9GGB9S4QLf+ospvh+x19MJYG\nV9kE1dt24CSPSjnYcJzBM5Mum1aGnDspcZzqPlHoMAbSHZnk8nxajBfwZ3wU\n+HrU2jxzGYXf3XVXcUnStIbZK/0LzN4UbsxAON9N/LqaSCfAsXkM5R8ADi7X\nGnMB\r\n=bfiG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBJa2rv9M/a3UD7KKTm+ot0i0mj+eZMK17MAPWhzw3UTAiEAubcX6KBgp+hV4unypWMirfvUpFsKT1bpcfyVZAnQLAU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.14a172db.0_1598384909093_0.9257813977998208"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e6c1038d.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.e6c1038d.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.a1c65593d.0","@material/menu-surface":"=8.0.0-canary.a1c65593d.0","@material/mwc-base":"0.19.0-canary.e6c1038d.0","@material/mwc-list":"0.19.0-canary.e6c1038d.0","@material/shape":"=8.0.0-canary.a1c65593d.0","@material/theme":"=8.0.0-canary.a1c65593d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.a1c65593d.0"},"publishConfig":{"access":"public"},"gitHead":"6629a242b77f90688959f5a54abc55be3a2dae2a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.e6c1038d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-HdmNjfpw4Q7jh9o5aRk8INwDZpxoiIyMff3BHOjsruhTvR2HeOE2trw1H1oKP1rrD3NM3faoLjvbOYsyiCiGzA==","shasum":"c01498a72364ca3bc7ef7aefe14ddbbd776feb4c","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.e6c1038d.0.tgz","fileCount":41,"unpackedSize":629262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSAuFCRA9TVsSAnZWagAAJG8P/Rp+qEeMH7KmW3DfXEiN\nfDW1wDMj2VSi5yq+UxYZVQRxyd6hkW6Z1F03cjUULNy2HvGoEO4uomV+fCER\nZzTU0HZKrFRFmG0nqLUPI2A4PyMvl6wKU/sbfLmZ08i8ngyA742OCWbiTcP1\nLNWLD/E24u+7bh6ex02lPksepmLZ0SbGCCU2zprFfgLtG3gmye8iWAIFt9fw\nRZCF4mBshsMxboV4bCRZOSK6Zb/vpdvb6VaiNDGoauZ5ZdENPqQOAXPl55zm\nOFIm5L5HnmllnzVuPiwWdUjdmrIhZrmKrDKMNdLo5+dVJSC75sCkgKB+Lwc+\nkwZYjdTv72mMVkaCi3pnfrrd/UwiwG+1cBVk/N+WCIQsK8T5jv287Ra8CE3p\n1PqC6Yk21PJkU8Va0H2nC1yFULrdEjnFEC7MEr5pRLg99sI6iDNj+gdX68Xv\nznusXt10b9v+Up+bwdcpqtMefLxiObmp6C/AMF50ak+0pQW6MfkKh9Unbgn5\nCOAvdxQKGxbaEsOO/SqqfJnRSLc6XqfHuOv9ttmPyduvmgjVWxGxSNQqWdvE\nijOOUktP3tHRVKq7i4kh3Q5mpAamjCj9GCFgYGNfJFXYc2Ocqi13OnPjkuR/\nI5iDvAghKuPks6de/msAFyATuz6nWaQksayHnL/jjEINOi86aboIJEdzUgZr\nl0AX\r\n=h2Ic\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNUIHj3TFGpb1NPGBn4Dhx7dVsBRisG5dEZLtp5tGvPQIhAPQ32l5Cgl0Lb4pkY2BLHF/hwgvKIWUsP88KZHP9lIED"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.e6c1038d.0_1598557061398_0.04522389035900254"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.34012082.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.34012082.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.238216fc4.0","@material/menu-surface":"=8.0.0-canary.238216fc4.0","@material/mwc-base":"0.19.0-canary.34012082.0","@material/mwc-list":"0.19.0-canary.34012082.0","@material/shape":"=8.0.0-canary.238216fc4.0","@material/theme":"=8.0.0-canary.238216fc4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"gitHead":"2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.34012082.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-yjdLJspufWi8cMu5UL0pvg5mmI49eTsQhnjzAOExt6bLGfw3pP6is7DxL83hRiqF24JYsSXolhhE2HtbrIA4gg==","shasum":"bdc3bbec5c43fcc4445e290342971a45d967aad6","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.34012082.0.tgz","fileCount":41,"unpackedSize":629262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSA4vCRA9TVsSAnZWagAAHNEP/jr4bowMYkXG2U/i4bV+\nKCp8FBgDUDJSRQ12co4WM2SD5l/y9yEt14azNiqGP3Yp9+awdnLiF33SWz6O\nQGPfKqvZqB42mRhzH3vmaaTpXQFBdm9Z22x+2k6sIUGBj0TiJAZWGh6+L0Ci\n6cFVeftHaJQmExylvd1fNV4dC6MEroi1Lc2vdMW7DLEBMBjlbpUX4b0Ls4MB\nbSMqBNabkz1EV6PlPmLh/nGwgE9KZUGT2xRwfgOMafmq9B9YLIiTd8yX1YJ/\ng3Ghb6k69mgr7jm5pX7AZXigU08J35b7D3o0QgoyvHoWoGWAGKeebVtfWim4\n9kZ18yc+LtkG/4O6EFVodCOB8mdm0rj+sveJ6lB/hJUq3DtKICiklqiTr+FZ\nNLviiSOEV+7qoPp3OJPVuzvHh+BKFJMCRGLHhOLIc0x/O8WF/+bMXjBknv9s\nX5c0GmUk5N28MSA9oIdh7IhxhfvPxSDtQNbIIpWV5ro738Mh0lFb391DBmdx\nNOnjYRMZNsd7q6s5jQg/UeLLfOuNTXAcOzQ3hsOPg+2w+0D+iT+Lh1E17T/Y\nthoWGXzdGalFfd9nZIamekZJ9qqn8aP/Edg7RItCcojADdoI6J9bwG9C7z4q\nCKRI8kY2+GiE705//uSospPuzbU87HCdvc74BKZMVvnPn5ux+GmEheRp/mzF\nLmSx\r\n=xRyh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID7XyfB9xd3E0F/aw3heP1YR7kFq/o1o6mmqlQBwk2wjAiEAnxqf55k0FNeAu8IT/M9gF6hV8LKgYGLO/21l1OFhMb4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.34012082.0_1598557742915_0.4980518838426107"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.c073f7b8.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.c073f7b8.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.911014711.0","@material/menu-surface":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.c073f7b8.0","@material/mwc-list":"0.19.0-canary.c073f7b8.0","@material/shape":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"e16d759d8a3de4908c04fd08603483dbc37b1747","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.c073f7b8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-/YlBTBIRFt0tFHsaZKIXE4hT4LcMRcCyDAKmkNLbhNSDUJK6Y3xfOD8zwnB8HdQTXYMrgQ/2wmawhiqvljeTvg==","shasum":"7e1c960fa0405f38c9794a83c96079e1cd348746","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.c073f7b8.0.tgz","fileCount":41,"unpackedSize":629262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSTsMCRA9TVsSAnZWagAAn1wQAIf9w+LLraMChB6T1oDX\nrexnbWYvyPNCj3CoGfrBH21YXzNyWBWV9KZv0XawFg+0083Mxx1/2of7j8on\nz/x6RNcR9xOMZ4Mdb3dbFW6fyzHuy/ik1tcvW2SFiTaCS82jMVGqhtcOYlZn\nU+PriCn1TyE4DK1K+N2IDB/ZN0YpXmSYtpq0LN1h5wSie+N19jUOWNYIbzl9\n0hmw/FrIX9OtxlSeLixuj1peXwhWQfj48fv1tXOgalFAal6+SXaf9QAWsr7s\ni4Nd4mHR6y3QKGpiUvMlFhRomSOSPQjpKbFfErmkb1U7UdK6Yi71bDwk6+L6\nX1UqPZCoaMIdBRysH0Vzj0CQNKmRz7TTJ3QgTbUA5y3f3ogWoz075t0tq2pI\nqPXQIUSNmsPt9LOolTM4+txmQoTI9mCMKFc8X+b9Hob1AdBGwnkUVheCPQM1\n9jdQEBu2DebjxU7/8lQYTilaIzQ1ct5EDLyXJkhDm6u+wvLTBGrgHDpdf2R+\nouVutwXc/sr+taZmEXu9PPaB9/JwkGvTtbW4i0FecydDQyC6jvfiatbvO5Ze\n750gWg1EtQc4BpVVZojioknJFtKrf7zLPjsAdUb15W9McIVcF0UU7RuJVGoW\nFCDNAxPEW5s1xW2EnvEBwMTrwmH17svFZvHY6yMTEYHGoP/fA248dgViYFC2\n0mUo\r\n=c9Ny\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCD/2wGVdX+Rms/8slAMzO52wzJcxpET6i5f2jUcWQMVAIgRilMG8yFO32pekEsIm/WKRF1famk28boweAAVvr1LfE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.c073f7b8.0_1598634764015_0.5754623781408348"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b7ae68ff.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.b7ae68ff.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.911014711.0","@material/menu-surface":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.b7ae68ff.0","@material/mwc-list":"0.19.0-canary.b7ae68ff.0","@material/shape":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"2065ba1bc7a6ad7aa6a2c0404136a31018fba984","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.b7ae68ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-MSWSO8uihMnF8SBScrgDAmdSRgD4aVPvxi7dVymbi5zYeaQYEKZwhwArUSY8v686oqTJo+r65JlO2H/TIXlp6g==","shasum":"1120318b93df69a6a1bc5f1d90c96ef26d25d795","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.b7ae68ff.0.tgz","fileCount":23,"unpackedSize":112593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSa8OCRA9TVsSAnZWagAAUkoP+QHHNRMyCI7VBAAQG5KC\nfNSyXDkwFFL/PukO1vFxI2ow8WULJlugnN7la5ftosQd81Ic3PLHWmEbAM83\nNNQhwGYXLiMjWZuXxQ932FhX5jz0hdHiv769inW02lEkntULFWOvvoA4c09G\nVWqZz/5Cjtd5RhD6nqBANy+P1VbcWaSqbObkkPTV1lXaC/hdZzOun2XV90Sh\n4DxO0hbqCK0PbPOJXVUwzKa3JnOs8ec4fIzS4kWjWvkp1vi3vztO7B+Zx63I\nNOwoCEHKHrCNXbV2WcgVNj4iYj4CZ8AG7X1isqMW0ySQe13/bqwmG50UlM2U\nKrcKsqC2X0QJjA1USul3Tt+UNy1uS2kxjK83K49CrOrFlptij21jfQBNlVyB\n0VFlBZOB5mnxi1VcAOZYIaXyPr6FuvTWEsg0JxV/EINBgXywpoyonqAiUirt\nsf1/f2QUHZHGvag8YOwYQA4SuV2QgbqrrbL8t16WgFLEUZvg8whe1qGTfd9G\nRQlSB31Ljt0jhj6ZHrdx37phQkXJBHenOMII5genYz4s7UU1P8kNBBtWIMR3\nR+U7YhBp11M7TJltdxiGedM/z6PSAM3Idg4hyUBmtY1nnPk9jqPNkEHPt/mZ\n2AU0PU++SWmYqaFdoNzVzvW1PA9y7FsQgBkYfaIbQx/rUq/CnAL/ELzZAbzg\nUJDH\r\n=ZtSJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDL7PfjsLJ45XlJgdyHzjzFxNlTb4TkWMqKmgtzcK+nIgIgcSHBeiCnhIWtQenHyV1Xz872iy9fkdorhWCq5c7eayk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.b7ae68ff.0_1598664462395_0.535103794580434"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.697e3879.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.697e3879.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.911014711.0","@material/menu-surface":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.697e3879.0","@material/mwc-list":"0.19.0-canary.697e3879.0","@material/shape":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"beb4a106ec95684b6ccc8c4af64c083d8462c917","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.697e3879.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-XZ10tFMyF+DDBpljZ/7E+h5kiOEeXZAEW/H0Yujc7QpEonNWdGVUY6K+f8rBH2JuMNxQOCPZ13weY8GVS7cWOg==","shasum":"a1b7f3d60276be9812b86342581647bf73557256","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.697e3879.0.tgz","fileCount":23,"unpackedSize":112593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTuPHCRA9TVsSAnZWagAAlNoQAJ3x/x5oMxblaUgg3Ik8\nWY2zVkrqeNebTVRj3Qey2Tq/KbU+yPY4YZeN4OH7a1oHv5836+EOXcr10ha4\nvqphYyeWy1f8GL07uQQ1ycA5LuYufyO7M5A+apr9eVqv29Rhni2UINQZ97Hv\nHRtM+g6BwCspm3zeP+h/MYLcww5ps0Bel1KO61itoQ2nKLn48Qi3RaA37ghD\nnJFdLXLo6w7xfTwkVm1P/nQFAuo5PjiccPmFskjR2CuzWUZmu5Stcza6/PGa\nwxS9h2cPRv8zXjJx6eUGAZlzRksYNtvdpu3t/RtkYst67prQYcSIigSL+LkP\nkgfvqv8TUKlcwahLBEpB2WI4lWPyv3QbuS2slqz1VxAx8Pi2bVuw28Wl1l83\nqT1UksI7vR/zFyEeviUiEuARrd013vBytH9vyP0MBtHKoCF4dfLCj3iHUtK/\n9dgwnLmud6+UP/oJ4+hfDEmyPHNzZg3DnyItooos5JiTRTRB6KQPYA3cxChu\nhoZl3PH/zHA5/MsyUIrKpvG6Zz7rwAAl5VMHYOhHFnEmI60gzrsC0Wx3M4gR\ngt40b6CZ4yXTRLah2lvNLFyPKdYAmRBoPtqTDbWtt7v+b8ma6uqklS8pQOlj\nPZWvUEdP67DyWWQ+25+muGUnfRlXLs+KIpdMlZcLrinwfi0+S8h8/JmVaMrQ\n/9IG\r\n=eiH+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCleq8qJNf1/EYMiCa0AFQc+Fd0cGKG4MKfryZL4w2AKgIhAK5WesVG6mVWPJLj91EcROlRWgN+RQPGjaU15xFxopkW"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.697e3879.0_1599005639036_0.03833662853370878"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.eafb7991.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.eafb7991.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.911014711.0","@material/menu-surface":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.eafb7991.0","@material/mwc-list":"0.19.0-canary.eafb7991.0","@material/shape":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"98841f8d9a2c624210fc6f0bdb87082222279e38","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-shape-medium` | `4px` | Border radius of the dropdown.\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.eafb7991.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-X7rMR8Qp9mskRkHqRdqQfVqlSmZmRZ7F8HOz0opb2NDskwQLoCOg8c789hUS48m+KVZXRSzMbsDEx00EoUukZw==","shasum":"6ff99153a14a329fd2695ca6ea8e96a8ad32c458","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.eafb7991.0.tgz","fileCount":23,"unpackedSize":112593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTwEPCRA9TVsSAnZWagAAHYkQAIuP457vJ9TcFvqAa70Z\n3y1UFBOXvZSBbNhKVxDmnpDAw67jiZIJdzbAQmtC9CNyHI/bPrdUBFWcILSc\njth/I6DSgtPRuxCPZ3e7kt0xP3gWtTLLuw+Qt5zQqWzNlBLDHW65LsyoV0zS\ncYXEayq1/gozp09dY5mLunH416VbUNcGla7Dmq1M+nKGaxeHHgB+wv5gVYT+\nuODDS8BPnDO2KWQAXKeVGOGpRsERGbfZCXK5FYbAqcs4bQjKi/dg98dZ7Dxv\nUbhtzzbFZiX5zxZOisDjgJGpiB2K7r750l36RnLgAEdEAazXvuuZdrKZ2vor\nnR48y+paUQ20CGutV95UIm5yIWR/lkdTVtcTgKNczqJOeQj/rCsxIGexZcuh\n1foqN2Lsq+GvOQ2VEYCeC6ehdj/Wrc8edbLCp3wWO/DcxGbloisLr7TCvj+N\ncQIB9uVEUk7k0MlUsXcQ4u5wM3WSshUvnFDYjvPj6uJDg5/OGb6rliGEmU0r\nPwugU/L5ljofLWhyyRHDBewqadPzdIr5rKE2+fQw0iW+AMQfBj+QQo5DbX4X\nmigXWGUB7LtLVtsyRSJ1NsfrzUlHtbsAuUK8ZwSCX0QaaUrw7SFZ3slKTF9s\n195QROcHAgmC43FYSmS6cUcwFqfijBwC55qg82C44BUodqlu/EO9TRBxR+No\nDwbG\r\n=InDv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcH0j+hPlqwd+OsHnUavVyQftZJCU+ypk7azxqdleThQIhALFb4aZpD7pTaX1x+xydch+Ib3H4uNHVe+K2PURXrr5y"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.eafb7991.0_1599013135054_0.9111474437803466"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.606642ec.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.606642ec.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.911014711.0","@material/menu-surface":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.606642ec.0","@material/mwc-list":"0.19.0-canary.606642ec.0","@material/shape":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"e02eff9a35c3b9c054d88cd2c45d44ac7d81db14","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.606642ec.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-rus2V5hxScTZNzFmakuX41Epug/3EK7hLGpHkFRd63/BGu3OK/k6yexklgmgwVud01+ohWWr+YypHAQIxgFoNw==","shasum":"223b6570d808987296d322203868dc6b86b155e8","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.606642ec.0.tgz","fileCount":23,"unpackedSize":112742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUBBTCRA9TVsSAnZWagAALsAP/3ryki6pGYN6TCPb5gNe\nR/T6v3wflfCtqj4eN29pg3qAuav2I/WQAmE15mCwMfDokGQkb2w4jC7t5cHy\nuj0ITtkY8dbUTtfpM+wz7GjromI3eEeDIeYIZdPpb3PGF3kzPZGw9ufBV6LY\ndg6ouITEyndIQvPRg0GseVHlzvEPc//73Dhi9o5LwUK017gqL7f73CFT0QGd\nIxqvmv70hhJiHmlWa5YEA27WUADJfexnWTeQMLIBV7nAWVd/WT0XyKp5AO5V\nFv+gtEbOvD20bv5TkvZyJoOx2x4nKOIt6Y6ulc5WOe6S2S2u7Q4iOQpcVHZF\n0+PNQL1jHi/98GQm+qusZO7mkfcrAEVel0niOld0Icm1nnfsm6PaKW442PPr\nzerQwCLkoRqGI7A/UPeNQ/ceb6oVywZ9Y4RzT6Oe4bx4x9JkS8xPlhCeOtY3\n0eyw6xwuqhYguYi4jD146uNnylXYcJqQjr0uDXo0pbXq8r5hpkck679UYz9s\nHCpWWtIioBiO5TKHhZZJOXy+obMI+ZQvtInNUc7Ly9eZtK5yT2CiZxbAr33v\na5Hl28AHYtaXl+yRQv/Hr2MoCLgHZ+5Ke8DVDznv4VDfNblTXbM21ZPikmNo\nR2KRVvwABphJ2kanompPOvaxX2uXLvpHSvs6/Lb6tGc3HEOcE9VKRUNHoEpa\nBHRh\r\n=YFyI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFbiQyVRdvwGUHA43Q3gxYuRaFH5z+ypURJ+XM8rW6X6AiEA8DcOfjXJbEm6YrG1CrCo9nnYE/Iz+hMhCV5Ld4wuSRs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.606642ec.0_1599082579382_0.5675087017706777"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ddf05c42.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.ddf05c42.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.911014711.0","@material/menu-surface":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.ddf05c42.0","@material/mwc-list":"0.19.0-canary.ddf05c42.0","@material/shape":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"1733e660bd96fac32b417696613437f27b2841e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.ddf05c42.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-8kzUUvUPiHTfyWWgaMkJ1OXcO8Aab7EzikHpHs9aHbpNVmxp5Na5w3Yfx8wF9K4zB73XazbCR7EPZjjWrWWvew==","shasum":"dd51ea0a607e7f59a0e7b9454ec5d46a89a42850","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.ddf05c42.0.tgz","fileCount":23,"unpackedSize":112742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPVoCRA9TVsSAnZWagAAungP/jmIG42hPRjmUX0MylXm\nqx9vfm3tpZp4doVz7rVkqLvfiYl8S8Ai7A+SKw7dvI5QK/9BxRRhx+vn8acE\nLI4taVAmdH0f4SBNkldhh8scTRLqehaJ/sq1WL08ejtspcWOn7Y5GvfijIWc\n9qpzYSP6ewiI7LCb1p63BWjDVTDn8qiBW1Y5g/FANEGh6RhKksUt7IV8OGBT\nVacz3jf+W+dK+LGjqfj9rvmJl7uVU+5M7DWFcw2SCaR82MJO6L2FkmEdmYtJ\nng+kQO5cpg6YTVuQkxL6z0CcQKdKRyzFu3fYWyYPz2pDpJgFQbVWjKmRy8DM\nj/t/PKRz7+Rj7zuAkQCWTy8KqE/O4CfQNZZUsCxHVQNmzqBho8jVSofCNgYD\npylZSHXOBQojnvt8FrLSt8StTgiz7VHWAMc18AlT+TeODVsHSTSkt8FrAGdZ\nKbfBIEA45sHC1yksw/6g1zwYMgHpeaW9IJ1a6e9WGGCyzfeRiNyaCfZN49Hm\navPUUn/hm6sT/dckkEwwEqh8b9odPr71j90PR0Z0eT/cUZ6j0Xpr05nKmCSa\nRs2VimY8guf3HmtSAMujiYEGPDrVRHeQxWd4EaIhXgAC0L3i9cFEkqylQqwx\nBpb+5+K+mb2XkM5jJt31BWGO0ReDZd2pFty/r+7T3ddYErGv65vTJI78LSvk\nw1wz\r\n=fm8+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID4NJ/MQW1wOZsMzKFTKMuds9gWJYv7Tq4V9hY31sY1vAiEAroFx1Z3LdHbM4b5Es7MpG58yowVh3Jzp1UmjYR2vxfA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.ddf05c42.0_1599141224047_0.3881874732601871"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b889e6dc.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.b889e6dc.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.911014711.0","@material/menu-surface":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.b889e6dc.0","@material/mwc-list":"0.19.0-canary.b889e6dc.0","@material/shape":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"9c47011345ccf89ec21a35053b80a0901ab1d6f3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.b889e6dc.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-EaNp8ZuEkPK2C182nRamRkCFpX6sJbBWrhUslbhO7pp9DOBnzU8BnEtGEEr7kz1bHkxaz6c9LePHtNxRaHkAMQ==","shasum":"4eb936baf37db9ffe3febf899efbfffd2dc572e8","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.b889e6dc.0.tgz","fileCount":23,"unpackedSize":112742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPmuCRA9TVsSAnZWagAAWBoP/i4rb2j1kxRyXON5XqMh\no7tOM4vnDiNohoabrQn5AcM6lu6mEbissf+dRAAKylZFXzKUBitayAHgioPR\nKQayLGa/V4hNGvyg/nNzrciq7CyTHtQ82pA4YUs/AdDFdhtqeGiZ2qaxp1Cx\nzXmp/aGbTDmVCrZA6GUHHtxXE9p18jSbrFax2af7cN5m6KpjBMptleKFPyj0\n2ljP/Hwl45kyhvrLZzzHQjL4AxFT+nwBWWuK+2iBaR1CJh0debRLW726Visp\ngKxCZobvnP+OT2b/O/U5wCOkH745qLiIRfJoC+pp34R3pccVuHTRewA0ZgLa\nqhnWTMc/mdFMFPED2BpmPHriQbKVbryE/ZIL4eOIQjR9LHdFfMmwNi8HcOxT\nZAeo1Ls61CzPxp6zFQJbGzwMlJniVCfNDt3EftGZbIvmIzF6j7aMKy6x+/e8\nbhYxcb165sLYUy3MhBimswpMyt+vp1+U75NsmN+lGKp26fEKdJ2y3FaRs9KR\n9B7muC2Ql7tT9gdboFMthyTgrOS/54rUuXwE759quuLMI/Ld5J7bzd1bwlHc\nDdCAvphik3U7m/ECVZcH08vcXEjg3CQRwv69eYst5sdHKhMbLIBhkyvulV1P\n0UDn6RegElkXROw4Sc8/luR9IuPtgdzhLg/z8KB+qFiCM7XNwOEuTmoo0pda\nhnY4\r\n=pyAV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICUXc5NLmXXkVSpN0AA0IIGifPLcccqCh7YdtElqortAAiAjyzZhTqxNHOItrS93pzHq2U3dpXwY8+rdikjRWRtQNg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.b889e6dc.0_1599142317871_0.5224744549959761"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.aabeceb0.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.aabeceb0.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.911014711.0","@material/menu-surface":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.aabeceb0.0","@material/mwc-list":"0.19.0-canary.aabeceb0.0","@material/shape":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"f699717c41dd2fd6f77fc62da010cecb621e6991","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.aabeceb0.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-YUgBcBIT56IQ/HPBaZYb6zTIDhVEXpX2/0izNBwGeWxhW+rziqRYm9Y9+M4dZYR33cAxd9cMEDdr3TtC9dEnmg==","shasum":"4abd78386797f1713617ea4201c6a77b995e9aa8","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.aabeceb0.0.tgz","fileCount":23,"unpackedSize":112742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUUrRCRA9TVsSAnZWagAAlx8P/3uWlUAKawFpFdTdq5ec\nKIzxvNSwjgyIuU3kWS7XmvuZuGgae/SpucCc06PPASVLuaZSdQpnHB8/vz3t\ny30qiW+XskcJgq6es3EplA5Bvb2ylKEbPzD9wAA/aKZM1exetvlJwJWjLnFO\nbhwtIpRye8FwEYlqxX8uskZP0fCiumLuVFEwgir77rAahPzyo/hS91anivIx\ni2iy36Mffa8LEEBP+pgvzJSm2a9SFxl0eInrdsEIGtWuXZkNOOTphKXgukZH\nkDiVgl1xXOoLGSgJtfWjPF4fySOTgHx/Wsnw2jJdqgxy9ZL2jfC7rjEDT4LS\nWeR4ec/2hyzIxh5iZj8kBLlfuRoXwv9Vp92rSN1fJSTmkcItqgidnk5vNcrs\nULIpNsByvbn319QJkuCDvKolB+9YypS6h3JRxJirxANzTta6IXuFISivz2xi\nnlqjJwYsZQVztkhPYhmw/AheiY+0VSk/xIST9R8jWpFgBjBr/HrJED42Jhil\naGgWeVN6VEgn7qoeYZNS26Yxo5aTSNygyFpcMmCxkfMR9QVBo4MYQID9zHjo\nNI8u/OBjo5msgZs3tm7ydjhPrA0iZZTHXExOAnpu9qiGDv/L2GXMAZETX8D3\nC58J6A4XMyIGkvonaU+/9u8a64HNMhag33WRVt55Lp0EHsVqV4rHSxCuvULq\nAP67\r\n=SZm5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICXQ5T3jufe1McsfbSo2DP/uyiG/kQA5zmvvwM/Oobc6AiBap7m6I4zmnmsaJbvJR6haQKcp4QkoopbnrcYfY1chMQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.aabeceb0.0_1599163089273_0.5852650327321476"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.d8cca3a6.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.d8cca3a6.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.911014711.0","@material/menu-surface":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.d8cca3a6.0","@material/mwc-list":"0.19.0-canary.d8cca3a6.0","@material/shape":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"db99eec046a418490ab66f7fa667607aefc5b26c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.d8cca3a6.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-nAYQ6H5Gl5e80W69blFlZQBfz0K8OFIh91mKB6OQ2kny8I6M43QIqdr/TTnkdnXrPFpZ3Qd+tGgcp5bybig+mA==","shasum":"8d89457f8aec261ed5575e6a714ba95f21f65332","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.d8cca3a6.0.tgz","fileCount":23,"unpackedSize":112742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWDbCRA9TVsSAnZWagAAOAoP/0xf91PFdazFmGujfQSY\nu0Bx2JawH9+agLaE3hrlnS0+WbWrfApPMhO8Q1w6sgnCormYy4DWsvj8GKHp\naVhPHJ8AVcDNqkheIXcCKTYBdKUAacfaqrOkSqHhatI8UPT3A4UF3QIm4AWv\nSvhycFULXNt0qGYDJgP+h670Vus4VSc0RHn7SEoVpRwbZG9+2hvqq1zb0qD8\nqJaUi8goo5TGSpEdmWR+zbggJUhNQOVFvU73RWyzjyULmaXMvXBViIcIHAV0\nM2J9rZ/clxandcctSK5xpUEL6ci5nhKxlIanXD0pDFDX9oWCrDrFMS4kHdKn\nNuhhioJLseKCsMrcCP7NHWD1XpbnrObSdw+pwRTRhIzL2xSPir9xmStWxqj3\nmfIB14bP29xK+UDD9wk7Xi9ptj5mYmrQckLTRdPy8oADk2lIBV4RuSCiHnR3\niU7ZdHgstsGZ98PNHG4t2+SGCaE+RHR12COTmtL7cTmkH2lZyhgJA3s1syiC\nifdHA+3GPgB6+GrrJlOXNeqhl40LHceaRyn4wF+XEjAuS0NtF9WIWg9pzGpz\ng32SbbLvsCeXb/dA5c71DyJkVa6SWwcaPXBtyOwP0XY4iMxCbuZ3JTuZTlQc\ns+Auq5gPe8NXn51VjimZrHtVR+sTtgUDKAKrIdW0bY0Q0XZWO+Fx4RF+88RD\nruzL\r\n=IOnw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQDwH0ZI3fkIHL3zFd+/NFzYU45iQA3Ycaby0IUFomUwIhAKRVUhXsqMIJxQnXR8TP1qr9G/RvW2sIg5OG+AOTGS9R"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.d8cca3a6.0_1599168730670_0.1676689655694077"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.26d34b2e.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.26d34b2e.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.744bfe5d8.0","@material/menu-surface":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.26d34b2e.0","@material/mwc-list":"0.19.0-canary.26d34b2e.0","@material/shape":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"52bb6b8fb277d5ec6b66932a0683e4f2fdeac872","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.26d34b2e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-nAzd40PdtM6sdhAZQDCu9CBK3Wqq7a/hBvvnYmp6b5zXj63oPrmtSzhU5AVbUAORCtTpsewE/mJgCE8ujArfGw==","shasum":"809a1695c3d28ef969c191eeef90092781220275","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.26d34b2e.0.tgz","fileCount":23,"unpackedSize":112742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWbSCRA9TVsSAnZWagAAsFsP/iG3AAImM7EnNkV51dk9\nxnigXDEHUTLII96QAfap+ybFipbRc1iqOOVk8326HIBzTWWVrpySwB7TFGYS\n1Ae0h6TrRNE1EzFDFTQ7EzxOD6G02aFhBjzE6DAL9bKlToLy7ZL0mpGtSxGA\nPzvRpuisJSMcFMST25TpT7AAyu/qN7BBHYddu91imgRWJRjbf5SrEzZoHQcI\nzxi/ZDcD8IiUYehpfbfXyrabz/5zHGV0F4QkQctzdLhylNJXQkollGAsMAiO\nDRO/P4Nsp2oZEZ1Sjy5QyW6WUfTwC5r3WMNiO8kjzxMCG8MdvCudO13STJBd\nx92w/23q8UcoawOE9E7oYCTokoZYOY7RFB7fn/TUmd0auSp5AXFvUqsvZjVz\nMJKnGH3iUTyaqtR1hGDYleIAzXNW0EArnTkjpnrs1f08S1WNdYwV35K+/D5t\nrCe39wFkm4DVIHnvu3qXFZSNm2hvUeiyBP+ibYdN6I3IY91uJcsSqALm3jHd\ng6TxrxaLia5wLvJ72vpzJ41hdCgvbBCi+Ulhpc5NO4OOHMKymNEMQqIwPzk4\nijy3n5Z32cuCAcWLNq9xmT9NHv4n6Cb9PEsouC6Gl/fkBBTMXSqivyQ+cp6f\nsfl7KpkmcEJYjBeSEfZk46SPsMArZZz/cxWIuVWMXcXM8AsVjPRQe/sdjJH0\n3Q6R\r\n=nbeP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEj046VGt7U6JpuIRq+sw7WaRy4V2Asv/R8LRmlBnDCWAiEAmL3wSIkmEvr6Kn2U+XUhWFh3sYjkHIUVqSEgRflbv0c="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.26d34b2e.0_1599170258028_0.013542441928119153"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a1c44494.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.a1c44494.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.744bfe5d8.0","@material/menu-surface":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.a1c44494.0","@material/mwc-list":"0.19.0-canary.a1c44494.0","@material/shape":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"ee68077e51a883c9a0728019c33ed96d4563758b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.a1c44494.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-V+ODFDnB8s/3ve0ooIX9PYIL/sNRlNiPLHh7Q5wPNG/szD6dn+QVX2tE1WO0NCTrVG10ESACSgbgI/HbR8aT4g==","shasum":"a1d46493de7c2e4312649ef66095e46e97aa8924","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.a1c44494.0.tgz","fileCount":23,"unpackedSize":112742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWVJPCRA9TVsSAnZWagAArm8P/0n+kj8xVlS9pUmoLN2q\nMSrh/o2Umv8rhSCfRBaev1aSCqOJ5WUvO+jKs7NlsrLj7RMVacPK3kifuk+N\niVR60sBjs6/2dtaf+HdQ9qYx9IRG5uyRF57zolBcM2cXS7pvMrwrQrmFCPID\n3KX6bxr8EDdGFUOB5EWcsF3SmSRdX/vIgygBev5kMF3xYMibljzSTrQ1WI8M\n4M/j7fRYhe9G3zjnfiBMxnaUXqlE+j8gY3vl9lz3E0Nagb5Gg2PHIU6dhtsc\ncnNzwyAxdK9OsWT733EV81FvrjguzPlldNMSQhOou/trAWHbwC0rbpCmirXR\nvwbD+FN5TlqfoIRC1/rkS3N/XWUzZGNbguEG7OfbXZnYgY+ToJLC/Qet73aA\nzWJpTa08yiHzFissdDRuo1qlM+sVwi3M4thasa+oBQQNV5voWKaa1Co+nXK3\nhFU2qaOjlyeKXKdbvU5JAOwDQGOjAX08F8Jz+vcM+NlaWGstGqhuGj6AMSrt\nKs2k3bfX/Od4OKBGj9TCmNSwGO1hqdCieQNDe+RzhV2C4j6OChr63cnl/W90\n9C3p08qOApn7ujS/MK3oLgJ8Ksvla3WyrNYQ2dwx3IJ4ISJtW0nHWTZ1nBJZ\n1hl03RSMNdIDcdIaR+JuYcQh7k2wJreOoBymcp4W81Mi/F+k2InrgtRUieST\nAROP\r\n=0SDX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFj2fYcpLnBYGxOJV16eIgy2IA57Zu2ysd/x8zPHZ2zhAiEA9uICLZjTN6PAof9/rCE60x3QcdEvMWQspESAtkOJGJQ="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.a1c44494.0_1599689295365_0.3130659045389883"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.be1cd1e9.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.be1cd1e9.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.744bfe5d8.0","@material/menu-surface":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.be1cd1e9.0","@material/mwc-list":"0.19.0-canary.be1cd1e9.0","@material/shape":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"e4ece959ee320d67e92b5c9add79f6f7eb4b2be4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.be1cd1e9.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-18hVueI8mjNgFyTcuk2gatSk2d7zBlTTMXVW+pqF5yx4cpyW2xNEv38bRsDBugXxl6D+i+7L+qNy9uqH/ZLvmA==","shasum":"bf770ae301ead59f1243efa134520d83dfac650d","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.be1cd1e9.0.tgz","fileCount":23,"unpackedSize":112742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWldICRA9TVsSAnZWagAAsJwP/RPzWs85SaNXtwwFBsr7\nEay37y30P3IcnO3EIP5wADlRUD7crpeGQxCV/SmrF2lO5wctBG5CbQQ2rRhd\nMznNyBDG5yzF6v4s9jqAJIcfvDWfPKyUWaSJ7r+h5ObLybYG7e9XjETG9oXG\nBGM5JlhEnXpePsb3k7TaFbFSUV4ZmrMtvT4HWlSa7ULGkwDj7uG81N9DQ/Wn\nJP6InFr2oGu+N6YJTM3grICZC6/uRZtvRsp0doeXqFq5FQYO1tVj4U0tas4n\nJERLyqPXOAAEp6y0xociCzmV8aVBF792Jvu0Z5PwS40OxVhN6xR8uziRO7cm\nbQ5m0bzN578dko/53B+KVebbgJbFojUm3veczUrW+SpTYlO6AOzxAWfxNZ8h\njWeiUgDRYkc9CYBpAb0N5xfBHiLqaq5M92+iRBVQjGeL3hlNPXmQAPDILr8q\n49feW8bBMcd8fkY0LKz29HrHLhd8H2i5acqEQs2AzsIUpI3wiAA3aZwATHtl\nZFxsOU5t0uErlXOulom6yF7bgkemjt0pX84WL3rr8eRx4CzFMeLtQrwYTzVn\nHMxJsHDkbSfndQGDKsI898UD0wfCvP0eZ4m55/6La88A00m6VR/6AghjlAgY\nwzMSiWZJTXt52oAHdcNTYtn45gAL/lsfSNBCEUFZaox/mibdqxv/D/aVt4lV\ncw2k\r\n=KiM9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDt7smaH8BgxmZnQ/0669l5hNzUBaJqlzUIDnssatDgwIgbQN6WDiWqLCdK0b4sCjiUCp9kQdfalUO9+kayWCmON0="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.be1cd1e9.0_1599756103807_0.22256932072192304"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f094c0ce.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.f094c0ce.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.744bfe5d8.0","@material/menu-surface":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.f094c0ce.0","@material/mwc-list":"0.19.0-canary.f094c0ce.0","@material/shape":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"de510bf2f44db6ede47942c88abfee6266225354","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.f094c0ce.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-WVF6xDser0P6ISnCYaOWWLe35tOm9seBMQ/CNQD5G+NbXxeVHRuiz4nOkkaeG5eAMzdNI/CJWzZb26DrZKJt0Q==","shasum":"ea3d0cae570c116b5ace381371511784e36948a7","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.f094c0ce.0.tgz","fileCount":23,"unpackedSize":112742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWmQzCRA9TVsSAnZWagAAE9MQAJPx1xjfb47gONrBd2ph\nsvjT7uzwktdYWRgepoB8irT+n16k5B033eaKIbTLgwWOHTvbnjWUkgrvDbnj\npQ4ozncSWTnO5lqa+Huz9/PxQDuIsxmGnNo1KjXKuaaTDDMXQZ8fqTZSBvGW\nytJvmExp+IdhnRfsvnljJT8hnYt+kozofmQ4UQEYoApdMEtjkcqDHGTxioa2\n9r3R8XF7L15XYDxHulXavXiiUPQ4Mb/5sxNbgHrfBMz0b1TkN12mJC+tj+zz\noufGvFDMbJewz8vd3Sm4Krc7NUaVUmOAzBuYIZSx+yfZ4raBjtZTCUblmIsU\nvcKlN7CJqdflQgGOEOeYkKVFXA+u7THWg0MHl5XF4HoNTr1JiIvIqtV9eMUc\nuIQiGqhuvSxwzHoYXfgEW3TYxBdLJA/x/4zdaeGaIKY1CwmnAImeRjS7hvk1\n4xlxVCgGKAdRxQZCjW8msIIUkq6wAJtNsTbKRxxnDSMn13+/01HFMJKTsuaJ\nqzT4etoMqnSdN1t5zjJ2LJjnObhp2qX4jRUxikmvuLA6NT0FlzhL2p8BYbxt\n5YmrnVs1frOoh8AoEO4/WhOtF179jraiTAIeYgKmcxbZLTBV3aX60Jlrmgka\nblIWky3AqMQEM4H/nuw4p0MiTSjTQ+Q65yGuSIAv99jc93+mguGG3zSmM0dX\nbeN9\r\n=czv2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEznRPCYOI1+QHd2wU+X2Wf27MUmta9K2DdcSlFh33b7AiEAuc/OKI+caaXyeaSXWkwxojB95udEYA7yxnx/OHFUlX8="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.f094c0ce.0_1599759410606_0.8667365205896942"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.c1261e7d.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.c1261e7d.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.744bfe5d8.0","@material/menu-surface":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.c1261e7d.0","@material/mwc-list":"0.19.0-canary.c1261e7d.0","@material/shape":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"d3ed845121c57e24ccb397b137eccd91a179c1d5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.c1261e7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-qbbzWwlZYnDOu5dLsCG6k6MnsuAv/KODWKhMsCe4upPjZKv1ypEGqWg/YOyVKpuLoSsALU0MytwOS8XZG/CW5Q==","shasum":"61560147746c652df594000016aba43f8e271eaa","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.c1261e7d.0.tgz","fileCount":23,"unpackedSize":112742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuB3CRA9TVsSAnZWagAAqMMP/3KAwBMwLCS+hF1ibYUm\n+5AoqfE1UkH/e9LssYe2WmVjt+gYcdRxo/V/W11epAZTxXniRhXF2xmJrTSi\n+aUbDZ/DEiqfQkNwBnbcFQvPJg4w+p713O9SKNDe65Ge3Bk41VUgiZBKDPsl\na6Vb232kqEFIcLd/MBaKeIfTtouHZstkuvZ7TUpf1BcQQtkst8SAZCy6BgV6\n0kYYMvlf72vVPV4GC6gK/GooSEue/evN4pEEEUgVMzckIdq7evimk+5bWNPD\nkRe/BW2LEYbcwsWvexOWUjUpEcoxFbzS9UNTueoKPXUIJHb4Uy/7qf1gy50y\nvIiwAOwzioPRP8UJPvCKvQ31DZWM/oM9hc8sAqDrE3cHgvWRKmu1DAZhmT5T\n93kJthhiGmk6HEiMEWX1lJ8l40BI79U0JfYaoVSPdLid/dX3UkJcBMUXbKNo\nsq8rYK00CtcooP1wLqJs4l57wNPLSRMaaK8H2kgfNJzr7ATwt+hDjLMbMWwB\nAgXuUtPxXOHJtpaRK2DiZqxQX8YCHU6h8XkMMnFl92s8wKAsA/lhVATY44qt\nbo3jMvYwaUxEBDtt/VBLBbRL9BZsTLThO6M87MewU+Y8HlzGHjwKUcvzXFjd\nZrtLQt9/Rav1Mq3x+5QS6/YTznPyNyno/5Aa6DbQZU/jNhEOrm27EABXARrM\nzuOJ\r\n=rgEv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2PxYDefZz24NlRlNTCHe+630nYzzMqGnmzWMA7xOlwwIhAO86eQOMq/B5plvG052ca3d0TVDsymPH4bAMrStJmEwG"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.c1261e7d.0_1599791223154_0.5723934635837145"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9b39ed1e.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.9b39ed1e.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.744bfe5d8.0","@material/menu-surface":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.9b39ed1e.0","@material/mwc-list":"0.19.0-canary.9b39ed1e.0","@material/shape":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"8fdf88b38d36782496195681d3b1d340ae36fe12","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.9b39ed1e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-646c0BNA+P4SJoDAtnno7gdXa8qHOUC0o6nPOB0KYkCJh1E9lh+JZP5xH9UvxQZOiJM2KbUKH+yG0jXFg/zipQ==","shasum":"8b9cf7fbdd698a6230bb931a79e972d06254d19d","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.9b39ed1e.0.tgz","fileCount":23,"unpackedSize":112742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuCpCRA9TVsSAnZWagAAmpgP/jkkT6Rb9cghzTauycEa\ntdM7atKgKjMhLG2W77IIi9vbtcryKUTPgCfDy00N+DzuubvXHyyeJX8Xc1kO\nE5mysoqJ2IJvS7U2rfhCno316mMl9MGb/ih9VPmDhQ4ZzVqk2z+VNUE+iUjo\nRvRpeg6NEIheW2ECXymHx74+it47Rdnw608/GV2GvbAGyjyxsEBhHGmf/FOs\n8AIrnSp7TmoOoQUe3r6er1on+BZge3SRC1Fv3MIAUpY8ia+pk9LSTLZAgV0D\n52Bu2vdNaRKeG+aeek2ORbw5LJfnmN4t/Behw8E02eMKGZNKvAPr3sug3l/t\nF9XJuA6viW9ra5laVSdtOn9j1ON19uHE3jxiCICDnIypGSzvT4DLoW9qauni\niCex0PIS/7ntLvfN6GUQHUdCowo6SjQn9zAyyk3rZE/lSO4JTSEorEFCya+8\nWFP0KHsTkUNNwzJzRVFHMcSpRGeLu8nX69j+5Kmbzmf3mb3rqNzwTzvElcSC\nBm1NNgD9JqjL52vVd8IsAbTLJQcOl87EaCgGFmPOfMg7Z8Fme8xtQ0esDMXk\nYgCpbwwc525TXYFiDE6o5+SOPm0rJ4LuHQ3UZ46RFdJc9WKUKkP7NjtfEy/j\n9pGSlYYvEKYkSVWAPEM6JIH5cUDy7wJy8sxKBZi5TuD0osJkPeBXriG57FBK\nkXJA\r\n=/+d+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+0JwiIvejrXiprr6xcw9+5G9VMkk22EBrVlG8WTq6dQIhANgk+AE9rN5DW3eb1r3kp0pljz1c8zSdnOLacIMeGgj+"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.9b39ed1e.0_1599791273197_0.005131765321264359"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e67214b3.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.e67214b3.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.744bfe5d8.0","@material/menu-surface":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.e67214b3.0","@material/mwc-list":"0.19.0-canary.e67214b3.0","@material/shape":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"9d09adcdde4c822614f34fd4c8fbf1e1b07e558a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.e67214b3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-VfwRyNuthRjfTos7TYds1AnocQBhn8NEhFKdyIJOiaw5xwoslM0ttvk6gJuVmGu6sQ+kXiLuSh5uh/L8eTS2WA==","shasum":"15869a95d9faf6b986fd90f3ba33300770784dc7","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.e67214b3.0.tgz","fileCount":23,"unpackedSize":112742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuGrCRA9TVsSAnZWagAAyRgP/2vGLXbPATkV+lvT9ZZK\nrghZ8MKqEKLr1vgZVt9NnadG42IPBOPbd1tPEcNoftauoBkL6XbL8VqUmHUk\n+oegzP/7Gc6C0GHNb+OggJ6Zx0e9LLFFSCmKMoP2fmxz7e9thY8FcTNPmcl4\n+9i3YSx8hf/YHOU+NhndO3GT512iRKzom/C3kbwD6NR5QlORMA5d/OLHeEBm\nDlBPWhfNM4h068RjqUjJFUncSR7fY06p9C/CK/WeMES/R++dUbC0WHZaMg4G\nnuK9nOXcwqmr1ZtSieO+wlYkNGdUSsSP+Y+AEKXmFRZQSJHtp8wwn67VU5ef\ny7JYSAzyinqq1sxsX1qVlmjcS/pk6jUA5vkmqNauWn7FoRrXtcvdDQ3hX9rw\niNcYYe9qb4Uov0b/LsZEKWAGMvO8mAMeKgp7UsAvMPuMHRcNkik3Qh689XhD\n3r8RnGA/SWUwAh2n1AJbsMAWYzzBzr5A8yespXyWjerVWd0eSUwrTFq9KzNj\nTrypZdZAS/XHHF1jUFDHC1qxSh8wxeUqcdgGuKNYmjHwmmQKSGigar85uklT\nG95r8s05vvotMQBPoFdZpsRFU5rgSMyO9Dqn0nd5aLDeoLMuuLiLoQ88ks1I\nQvSlduM9XijvEsklUp/i7f9qMzx6akpVr/YswR/KWhPZpjxU9W4kKmBYgPc9\nxgkK\r\n=HB6U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC44LUcuSskmts/UyrSrWo5azZqulDXC9YdnCqQUryASQIgBaXXn1Dpqd/VFG0dVA8vTA4HXopzspd42+4eJzhL3DU="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.e67214b3.0_1599791531253_0.6442586699122232"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.36f5da28.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.36f5da28.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.744bfe5d8.0","@material/menu-surface":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.36f5da28.0","@material/mwc-list":"0.19.0-canary.36f5da28.0","@material/shape":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"eb828fe61bd1e331e8d6f63a24f6e78d58858a93","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.36f5da28.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-PLB0VGxSrYxqwvXA9OV1ef1MdCvoWAUCpbhOsPmgpvh+J8sddBXD1bevegYdiDgMhjHDBlvAm1ue0DwmELB6Aw==","shasum":"e194e87fb6a967f7e003d89943d0cd1360aa82aa","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.36f5da28.0.tgz","fileCount":23,"unpackedSize":112742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuJPCRA9TVsSAnZWagAAbJwP/1JWx+VS5bvozght0zLZ\nN/JVaWFcJeQNN1f26X9JYZjOj4FA88ylkUe1Q5gTiz669CJEZRQEpVVjJPA8\n2KRzwuPyWfv4g/+sIIbW3wGFq3d0M6P2VqcikFJKoQVgJ4qy3AtjMLtCH4Wo\nHvWAWZ1hxhnHQc5+JycvVTUy14PvATxJjWto+JLLLvtn0uULuZpaEULGyWLS\n9i4+JIYFmJL96JJ/0xqYciO2C5lXFSnyCq/YFiDxqQ0fd2F2KoCcB7o0Y3g+\nZEMagP3SIn38SdFCGofLRWs59M5fp9wee/8o0jvWdzDj11zQj84TOyiVn5A8\nPzEK+RGoNNarTkqQzJPpIibgOvpZI3ZUzoUxUFPjBu+KwiZ6fTA193jJFPQm\neWybUWPP8UcLO15I0O/FiZkTEQo/AsLktvO2KGBvTHc7SOlS56asNvv9e1qc\nDTkaKMQJk/hrgBpwByHTJEg0KfmuMw/Sl/YsNPQOWfl5yrXwSGYwPYllhWt4\nug1SYbyYeEhf/Vegx3EmkmvBb5q2mus9wSoYFjbw3+B1ajTBqm5cRAwWEv0Z\nWQs//gU03+2Gak0tvVZGam21+F7f2CMDe9i/eNu/IRhWqnT7VeogLEFyEQYu\nsMvvsS2mWYRojsVUaVh7tM+EV/+9JSUckQuao2D2sXX8rCEBIQpGRiv3LUmO\nQUft\r\n=Eftx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGwB8SCEUp+0K9QxfPzdmin+OwZYwI/MjsdaIItuxfn3AiA5wBBb9qKJ1fXWcskN1Q6xFgrKTvvIss3FN4dy2u8VqA=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.36f5da28.0_1599791694758_0.622556628635295"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3babab12.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.3babab12.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.744bfe5d8.0","@material/menu-surface":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.3babab12.0","@material/mwc-list":"0.19.0-canary.3babab12.0","@material/shape":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"3c0abab82c4079d265dbe68e3b3ce3dcac8519b4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.3babab12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-38DUNtIz7NS1Q6azTW4GgiNKRHwA9dEr6l6WenJZOH+2RNid6C4ytddVO1g9wy/m0ZDrlJkTalab408hWZEaSw==","shasum":"5a1f6250fb8c907b187af9dd17fddccef3183b72","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.3babab12.0.tgz","fileCount":23,"unpackedSize":112742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuMJCRA9TVsSAnZWagAAd+8P/RhcH09dC07otOe6tGmj\nX/BuYZpt8dSmto5rCtaF2pgk02im8c19bR5qx2iFsGamUIPB5qJ3ZBPUcuYp\nP1to/d1lm2Z3BAw0uGGXiLf8S+LlHWvoM2LLbaIPloCO0y9/cOecs7OcdRuv\nnQz4JQKw0IH5ev58SKNreaWpAjk+P5jsAv0ZZtrofaZvwt/gk0PMy9qLMsRG\nAcitX06kU/13s8mL68w7k9pTGKIPYpAglqsQ3dgbcoZP+GOP3nCdTixdyoqY\noRlDuLPty0vX/TCvO5qGh2m/qQeWJHrCHeR0QOSLaV2cJJhycbAWnCIDPdT6\nfoBafg+fUn4L3TBLzyFraPMfzzjpER1oQ5Hw5zZ1Bp+GUU7yanxvyXSxK6/0\nX5DPtD71s185PpfdepzvvNJzUXGo5EbJS8h/XImGyGD+9xZIUUIyfA+juPB6\njudw5UIgEhXV2Nl4msR0AkMxN9eXGi1JHYyU6u+Vi3NDGaXDx4d64dAnoUU1\n1IKjgkiSpnwg/Ih/GOYkLpaIHZxN26SPFKLW56czvsGEIAMV5H40bJRE8Mnp\nzDOr1kVc9+Fv8du0xN682TYNmCPurNLL9X+srji3S25uW2vgpD/ZfQQeYddv\nzrL53VY90XCUcSrdG+hENwHfdSLwroDME6j7w7/ECEHo/5hm4ugnD0AuMTiU\ndFhi\r\n=EWgK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDfK9uvNkEVF4/r5tW17MIuTMaQii3DAaD76FqMWSSktAiEA5WMgNC9qWcrswAOfXBDbfgyVpFwZnowywwWjw19CjOA="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.3babab12.0_1599791881423_0.4124343872830776"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a4481e6f.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.a4481e6f.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.744bfe5d8.0","@material/menu-surface":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.a4481e6f.0","@material/mwc-list":"0.19.0-canary.a4481e6f.0","@material/shape":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"de37747ea53bd97e6674642d17f239407a14ba71","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.a4481e6f.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-THMm8ChZnJYkMlIodw4i5thpsmDroprCKOIT2vTj028WXmfxuOn944gA+YHKJVpw88rR6NlfYKgq1NtiUWxPcA==","shasum":"482c134b48283d746d18d0fd540a7eff2bf8dec6","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.a4481e6f.0.tgz","fileCount":23,"unpackedSize":112742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuXWCRA9TVsSAnZWagAAT3sP/j2rTML2Nh/yCp4/5seP\nLkZY7wqJkPCdGH5dGYdnN4NzCCSKnoaeRlMzrvSdA/IIMZ2yaOT/bCGKJVQC\ndjDX1Cwy/A66Hvo2VWeKm8GE1R2BmlqtSemAQLTQcW3ludIHPdZGnqKJWBeN\nzRaw1PS1IYWhfUsJpWe04WjN2kNibV08H0hUGS+wfDCSkCJh2QM3PO6irUrI\nVoh9X0AXWYX0GbyWe3y4sRYFLpRa9uOb436BBxIaZLvU/DolBrt7XC0JlZ82\n7RFLR1KXqGfjL4tD62qPXq/uyzZQEApb8TCsFFZoKH4kgCmG9bMeGPji7a2h\npmga3njENT8ysMRHpWv4VtpfqM0xXznkF+TOq/r10VHmtliC6uJ41WueXlmT\n+eW6h4P0WF8fbAJxSmisAYsv8KpqFa8F+GPHR97wy0nkVpalL+JTJ1qjKVfl\nlV7pt1YPB5gLEtyuLBx5dGyjAUoDgsLKYT8odl8sqduOIhDmYgHHH58f7/3X\nOffikDt9a4IUxjVt92mn0Redpmuutq7UoCpGL2HB096nHBOxIa8Ynl2lTD7Y\naopBPajGr7HcEAy8O0MKGUlQQsWgIyuVXhTHLKCYgoTNqtvksmmNnaw08zt9\nvH5Xe7qmcw81gc46fwXkcZO5M6jaTAiGuQHm2NWorFTAvmBJ1Hm70o3EKx7S\nvS0H\r\n=Xzfe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAmxnanq901cQ/sAX6hVuaMtr35ztiQeXpnjwIjDXQnxAiBYJvy5MFLM0qlCyUQo4p1I4bMapbXF8ajHeThVmX2Ucw=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.a4481e6f.0_1599792597908_0.24964890935311979"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a9177836.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.a9177836.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.744bfe5d8.0","@material/menu-surface":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.a9177836.0","@material/mwc-list":"0.19.0-canary.a9177836.0","@material/shape":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"172468b3d6a388a8fa5360f5754a4a7dec5b878e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.a9177836.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-rQ8+WNMx5iexTDEQ6HfhVyEUlnX3C6i9rtVrfWup7f/t4okZjb5rfTN4bZ/Q57sdE1iuiqu88APRLE1okjoKpg==","shasum":"187ff3af7c4f7fd632e4e69ae3dc4f617ac64192","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.a9177836.0.tgz","fileCount":23,"unpackedSize":112742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7hZCRA9TVsSAnZWagAA4wMP/2L9aGRx8l4SxQRWt9M+\nRVKxXcu+iSLXagVTp9SACBO7SbvQ6vDzM/78Sd2gMAalvLkitTU4m6Dpfg1v\nd/eYQQRMpl85HLN59z4k5CinDfKrxCm4GhAYVHZzKAw3pS8/gq2Z8Piv2j67\n3t3NAbQ0XyUyVPl9IkdzPUZPhxIFiBKPKWSv51u9eiqzZ5zHDOzPMdnK6qHE\n81P+zStL0xpk1+PnYuF5HCwApXt5hSLM2lgKKMgx9oB8TUi5imbyk/qdjFF0\nGqSRhHxONQZ3i9q6J8qbB5teFH61fJw7G56GMJjy0/6JRfmLhywRls3CzXe3\nsUHfNzQVCWnzEpLH9cEmsXLRngwe1ZlsLoHUrCV1V7qg++CTwadyKYyprd/C\nFXKr6mbpctCVR3h03EO1/ys9i7/tIcbS8hUZ71ss74pF0P8xdz86a7uXqecs\nXcCJNWjeBFdTLfJ98iVwMmp3tsKnKlBAZS/44jNSJgU/2wgrhjo8LiJRz/qu\njAYIfmDjPy3CAOmuHcq1xyRzMUi7MSSG5ZxIb8wNtfPpWFrXCcxgC5LFB110\nQ2Ehm7YTxYaBW9rhiqO74XNLXgyuLST4vJFTBp8aDWyzI/bF1a+ckXl1fxMC\nKQkuwm87CgoCYRLIxcDk14JlqqRO3xWOxBDirgSjqvlSF2LGli57xZ83RtJd\ndBo4\r\n=0krf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF07MLSeWV0k/H6pJxNUG/AdUrabkQLi3MUMnbA8KysuAiA8odOVTTNYRmOtVlCDwIh0OUd+QqlTSQb7a8Z2Y88LLA=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.a9177836.0_1599846488581_0.7071919179685788"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b102a3c8.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.b102a3c8.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.319bf66de.0","@material/menu-surface":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.b102a3c8.0","@material/mwc-list":"0.19.0-canary.b102a3c8.0","@material/shape":"=8.0.0-canary.319bf66de.0","@material/theme":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"6e9858879b6405bc690bd677e308d5197c609741","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.b102a3c8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-sklqjDLYc98GGARTk2pwwS939ejxzDU1cKbvdCVgtrA/5SiB/WOdY7HSxg5pZDxrC1jalHDcY5urDyKdDqd0+g==","shasum":"3036d0060a4d385c7e4be8d7b5cd21e34e086e36","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.b102a3c8.0.tgz","fileCount":23,"unpackedSize":112742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX88HCRA9TVsSAnZWagAA1XgP/jcmAUXkYvClyD0wry8I\ntToxXAxgKfyahw9ZZDoB6uAY61d4jFSlnH5rlou/MH6+0TwbC2OivaSFnDaN\neMALtKzUDYfj84lHkyCznYVyZn8A8vXys9PmgJ3Y9JkaQV1rMSqO1vgdahzJ\nHNmwHSSAAFL7M89JfT5mFL6CJQIDhIq55b/qj2yOYJxvQc+DIX02aj3K3siR\noVO3Uf/cCPXIGjrxLa12QImhpge9RwPlzTE6YS8cXuQFEyxhBh+Q32YIDU4o\nY8faydaL5wE2kH6vmRaFQBDlE4rpbC/Ey7XNBknFcJXuYbe8Kc7CR/ek8Ak8\nTwpxJJss+OJGH562DgQ1Ba8pLM2HgfgzdghrmzeRwovo6G30Z1yfKb08Xw2G\nc+OPbmSHHRVfEGNaQXoIH0cZ6FjqGGMZ/FEj6YW8Au+TUC3/x8MJBKlWLIu5\nAtOQak5TWa6yQVJMzv2Qt7TxNSMq6f1snkRPMOfyIf174ymkrhzV00YRkbIm\n7aJdV7dAzBDC3MP2j+u6VFXHRd4QbmIxyDJZY5NDYjs/01yXVkT2hXNLj3Ro\nppLWfl06B7oTTKgmISdZmajHLXihUqEbLUsfP/Oy0IFk4b57qx32FnBKY1wd\nbGWrcvxlHo+hKcXmtqk92jkueLJbsjmzYZjEgk7KXdBazIFB+o7zCCxluX1K\nZWNP\r\n=8Vpf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID/jlMlj4Y+RbdW9Sv+QtJNIGDsMFFRApot9PfR75RWNAiEAh0Q6IGek9a9GkvzPG5K0+WmulBXxP9XrtdEF44CEjAE="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.b102a3c8.0_1600114439214_0.18083556657502386"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a7fbc707.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.a7fbc707.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.319bf66de.0","@material/menu-surface":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.a7fbc707.0","@material/mwc-list":"0.19.0-canary.a7fbc707.0","@material/shape":"=8.0.0-canary.319bf66de.0","@material/theme":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"02e804c299cde57ab03b33a403a43803fa9868dc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.a7fbc707.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ldj/aCW2VU1LENbEgJ5uP5KnZMwnNii3fkeX/AwmpBUszLKaBu5MQJ2PeNIikgvv4ZBYk0yzxoBEbAnUxLXrIw==","shasum":"fa8a6f06aa48343db7360e9fd884d65f5f750ece","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.a7fbc707.0.tgz","fileCount":23,"unpackedSize":112742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYOaGCRA9TVsSAnZWagAAZmQP/0P525JJ6YPduU3F8k1N\nqFAaYU8kyNE7iLKOys7FCLWFiVh/Pm1aw/O+EbxjmUQpkHg7GNozyYXkCaq0\njjWjOLBlIrxDwY5/PVu3DZSKIXjkKyfxKEosCGOzm41N/mVE6RBUsQMFbyrb\nfbYYZ8G1SCqmfpGRX9z9KEPQlelT3EaZRfOlRFWYjadMv7RI5FIFDwR6TASX\nh3Jvj9WW0wCSs+cZztoMMAjT4oVh+xOFJ5d4Ja71YBetTvjAfVNm+Pk43SLI\ndiuS9TsnWiyB9v5Ll3DBg1tOK/aelMwReg3x0vnFIHP26I1TIRfqJYh8eyzp\n4y+0pF3k1Wo0MG2LNoUULCKpxR8vL78LjWTU+jTlfxnTxJKfZ9ZREKHA7pEX\nReg94mr+N8kXvR5QWoeqzNLqnl4o9zd7dC/CTP9Bv6A/L4LZeRIzahMwLOCH\nUdKXYIVVEhkkjiqbwUCS6khBZqRYl8QVyV1GIDn/VsaCej2/b+YNonZ9Q4kP\nWy6sgKhVKQmk7640jGSS1inmElXNJkThxunH9EcwPgcL7efXf2XY9TDJlzGI\n4PNhmIbe4KiUkbEqYknyPLWTIGGYsos+gNL1DXclVtei94fqmFiQHe9ZZSkQ\nvuza11YqYXx3cP2svNk8vGePMOerPf8In43hIyS3WX3Q2tTmnuj4QbLDRhge\njJ/e\r\n=PjBV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeQMqrENom94ZB6EILCW7O+lrDb2AcDv30EM8VUnIYfwIhANwcc51SL74F01Zz1zsxkZxYu/m8E+jW9j95sJpkf9+4"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.a7fbc707.0_1600185989839_0.29930610438879657"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ed6b8660.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.ed6b8660.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.319bf66de.0","@material/menu-surface":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.ed6b8660.0","@material/mwc-list":"0.19.0-canary.ed6b8660.0","@material/shape":"=8.0.0-canary.319bf66de.0","@material/theme":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"1367f8f205fb56c27d6146b261ef87d62751f903","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.ed6b8660.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-NxnpEma4vCgRA65EASd9MyyoSFrSMcwVeZz04fCqE3pjwoLMRbBLXLFNeRVPW6MLnGdWdP0yybava8LIRbiUcw==","shasum":"7260573599515d9bef2eb0d859fac4c72b1e6004","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.ed6b8660.0.tgz","fileCount":23,"unpackedSize":112803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYPkJCRA9TVsSAnZWagAAZr8P/1/KufE83NGa6zVoxx57\nm891J/Vt07azVEEnickqftvnNOS2uvF/Qbmle2Hu6a+i1OPJ18MZimTX2kep\nAvhMK+dEuEgJj8G04FANy8FNTNikIFvp6606+yHZo865uQ+MORT/5qhYsbA3\nFkGIBBHjbfXiwztckD3EcHNBxPnLjVxmwZHjLGwc2udj5fYqnTnqjYKQ8lF8\ns+i9NXisv0zmBF6WV0Og3S2/5JR1UkTQ8K64WJgob8ztfZc59WbgnWZkPBsl\nY2XxTn6cyR4xqpr6FoK/IEEgRWX+UGWG+a//kK/1ucLGPCNr7T348mD5oQbr\n06RoT6ZM8UJjxX3Fbld505RXBDbIn6+2XK78Dp7Loid7kJa6FgWbp46dzfgq\nPPdUSfrZvZGveA/uh0vh2pPuGkf+ZyjczTcsohWm5cC/D2VlH3nwNJYGGzEt\nHtXb8gMJ1GkP6vs8iWj8F31cuAtgOWpKlHxRTz9zDGf56T2yVmYbSFxotvD7\nt9H2LjAx+/3Tbd5rcVzyTNESI+YIBGY6kDghUplMs/JvPi8WuUelIOxpXZpK\n0XwAltYjMPnmjjE6tV8tv2Yx7TaHQUH71A/teWUbKATY7LB38W3EKYGv3ByM\nFLZ+GvkmU6E6e9o5qq1oHaqsGSP09YM6jN+qqKcnuVEqI98PMlXe0A+UwZtu\nKyeP\r\n=ZE0O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDCFxZEcKvJTNjszQq4dmRW6yGUPC/8jVCVuaR+mGXhGAiAeGJvP/O9NyRkC3s8IccNiV0snh4S1qO1NWeomSnq+0A=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.ed6b8660.0_1600190728982_0.6499465368213857"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9c2331f5.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.9c2331f5.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.319bf66de.0","@material/menu-surface":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.9c2331f5.0","@material/mwc-list":"0.19.0-canary.9c2331f5.0","@material/shape":"=8.0.0-canary.319bf66de.0","@material/theme":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"59f9c402cf61ed25b9563e2c228a24b4fb13e1cd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.9c2331f5.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-yy9BILGD6VrrUAItu9lfMzJ7IGkKP2rsSmj2GIN5tyZ0a7KNK8gFp76tMiz2/Jfkt6jJRDTulPqQ3xuxSPMAyw==","shasum":"3edfd5da9114dbae54290548fef463dbb87f8572","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.9c2331f5.0.tgz","fileCount":23,"unpackedSize":112803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP7KCRA9TVsSAnZWagAApm0P/0PHAMx74T/Xt11akbLl\n3hvmngkUIOrbc9bSOvnVQxi4QIy/miKlFOEb6sKWNRL7k2mnpnGTWRR1pZIM\nrxd43WIIsYNKZicNEa5xooj29m7xDVSH2LQ7fZCiu6cCbGWPGMKSsYELYigL\npSESHoM+yPcjcTO6Fwsa5P7TQZgAd+xPdu6vABAO6va/7b/xL30GzyK1h1JI\nasULnvaINCrDRojy7N+XJa8qTsxSnTihndvGxfhgJ0KcGwFt4gg+crvhYq60\nFkf7BM4LKcZIkzBXQgh7JrB/1yKT6L8iO+r6SRmqeC7TWFDDQkLqYfsZfqdE\neFsHc4m1g/+u6h66mxHGdOtjjFpyHGy/80kc3oRRI+YIJBv7KhTd8ArVUfeG\ncU8LoBDfJLVDzElXjoGsPFnYtuM14sElhpU+k/yITR5v+8nS04MO2CNnJLRA\nfutSwx2gFlCd3sAUCskWzOOKcxHGQZvTSLJ0Vuva39KX0SfIPXg0ip9I3Znc\nBHIHY9Puj/Rqx/tkswV4LOecTdSievasotpwNcge52/a44Hfv+BVsWP+xGhp\nqbijXSKtxEOmvGJOEZLIDDuyKYLXyD9HylDDb0MmIcwvF2A88PH8ykoBTrBi\nQjn9t4DBBvzukXk0RDKHnAw83K2DGXouIxjIs+dZ4efdMCh6oE+kh4ziVFPM\nu9Hu\r\n=edc6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLAdthUu0HUGRd/DYiad2ZvJTmUo7EDpvUwcXlJ+E5VQIhALj8OtizdN72T7OdgxqZOTVWYic+fNKHObnVJS57MHkx"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.9c2331f5.0_1600192201611_0.46028537670576175"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.63a5f088.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.63a5f088.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.a831d4799.0","@material/menu-surface":"=8.0.0-canary.a831d4799.0","@material/mwc-base":"0.19.0-canary.63a5f088.0","@material/mwc-list":"0.19.0-canary.63a5f088.0","@material/shape":"=8.0.0-canary.a831d4799.0","@material/theme":"=8.0.0-canary.a831d4799.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"gitHead":"e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.63a5f088.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-4/sd/JprYzIyOe0PVxLnrsXxGTwJygxFYJPkM6+W0KAbHYuQiA/56+H4etXSviYG1rGoRtmUI6QE74cznpFoVQ==","shasum":"861afb3e6120c15093fb35848acefd04e7f6216e","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.63a5f088.0.tgz","fileCount":23,"unpackedSize":112803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYoXeCRA9TVsSAnZWagAAHU0P/0Nq7UJNjOYkoMhhVjkQ\n4B3oBL42m5tfisULmLtBGqKdiPgRVnJ/QR7Ns1RWJWZdz6qBUnLusYnzkVW0\nVtzqynLVCeNwJsymzvq74hkgHnV7/96vC/qhY0cTSmluuwFqVVbSj8yY5YtN\nUWsXGwctRwlo3duMa2qhu9vKziAqZ6P4pIC/z9vq3aXPMem2SaN8mAMFp+b4\nz98NeMW2aTQWtFQkKYqcl5jG1XJt7XqLeTWweCdT3cnJ/CgBoE99ggzrpLVz\n79jJh/Xo6xeyx+Ot8ucJope5bChhhkvyoVsynHRidDbql7dYTlmGkXbpCScB\n/mugd3ySsuwjUsKSd1C+ZmIVV/8zkn7+4WKryKtbCMIFGzdGwdtRIfoIep3V\n/UwaUq51nmFAmoSdSfwWsK7TI8S5QtRHIPQuBOy/1wNLfjQAFym92q1VRLHf\nHs7bJ28qf6YSA6MfT9/I1FQk//oZwuCrcl/+39zaSeYyU7x4rT6sG1voBqUS\nOcMnowWo4Wklkxk284zss/VgA+hhHLepdQs/DgyrBMxIZSVlzv+VRzu326oX\nPqotayyVOGwDxxYHLmmEGFgT3LTdrby0ULnxOxahE/o387giM6PHZ9fpWZbm\nJnPFQyGvXJbodVcz18bS82SqOUtCmdKiki/WMBgqSjGgtkheJ/dJLgNiEyGW\npP54\r\n=LPox\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC65+KuhBMArI7vLom4Ok2mWCjmcHJSvkFN6TOCiEZ0sgIgMg0ZGjoy+TXoFfQB3B5NRn95nFZmOgnz89GOPLo89YM="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.63a5f088.0_1600292317692_0.9840898746251903"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b7995e49.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.b7995e49.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.a831d4799.0","@material/menu-surface":"=8.0.0-canary.a831d4799.0","@material/mwc-base":"0.19.0-canary.b7995e49.0","@material/mwc-list":"0.19.0-canary.b7995e49.0","@material/shape":"=8.0.0-canary.a831d4799.0","@material/theme":"=8.0.0-canary.a831d4799.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"gitHead":"18f169aac3491f89184c2463a837b86dba845e82","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.b7995e49.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-qO9CaK70+AKuhfoyCwxnVrsMYrkjxQqJzz+3yKDwEsuyuLBvAXixY2f/O/H2K/1adTjg8Ab7jsNTaD50YmUDbg==","shasum":"1859d85a093d1ffec3dc35284b9ace290a57d1ab","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.b7995e49.0.tgz","fileCount":23,"unpackedSize":112803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYp9SCRA9TVsSAnZWagAA0eYP/AgmcA5+o5Y+ZHtsYDQV\n3QTSY/I5heCNByCPT95uOx8F6ItVi4+TzXLFzeWyLqGURbEp/xgKapxHo7dC\nka4Ko+IXVAt1jyhPvnRy7k+lYWPZZ/kziEPDh2MwHcZ73GO7p+Qsj4E70Bjd\nnBruE4fR7cP+fcNCOKG42YXz3+AGizNfo2cd1Jn0JSlxlPy6bZBAC/we7y+E\nqxvtgVBH2iSa0U2Hga7LsDjnJ0p0IaKlGdzggVQ5QkY7Z2o/BrGaFWpsLSJk\nuC7nKVuAG/O63/bgcENJPU3nQ07PJ0Aff7QhvRqYFE11pnX2tkW2aaPVw3BS\nl1H4BYmpikbaH6m2XIbGiKswOxy6ux04uF8Y4cs8KwMiaDMFjWkS+Bya50OE\n56uo9ugGHLop1J/xDdFE8G6VGXKplIrH1yMLLD/e7NIxlBQ4fbgukX2sK0R0\n5LXmrE60tR+ubGFgUvYylNET5v/iEUeVQzyPDgnkAFPvN4v3Py2KsJwGZ0Vk\nQS6+1wpXNOCLM/9G72WssVMsW2bGhmD9Mnorpo8RTzkwjzRjxcUxBU05vt+4\nHyx/r+69Ko4xiT0ieLsKQJ5FKsG+esONqtm5zegNfjtYji50XYWfUd3MkJkk\nMTH8R8NQJnbjC9G8zK0AcXVpBQ4rIkH6uJHTZqYN/99Ub4ViaU+dzwxcDtKS\nvI40\r\n=QZRP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCcxIwRtpVY/tNh0/OLwJf2Q2RORw/mp7VE7HOawTFRRAIhANHDwzmHNshemirCRZLCrJ+GGpx9lQKohrY82Njclehx"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.b7995e49.0_1600298834101_0.9739396950664869"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.0da3ec97.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.0da3ec97.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.a831d4799.0","@material/menu-surface":"=8.0.0-canary.a831d4799.0","@material/mwc-base":"0.19.0-canary.0da3ec97.0","@material/mwc-list":"0.19.0-canary.0da3ec97.0","@material/shape":"=8.0.0-canary.a831d4799.0","@material/theme":"=8.0.0-canary.a831d4799.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"gitHead":"5f18f76403ebea15763db5e696b84d6d20a3768e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.0da3ec97.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-sI+FnDiGZn1BcfxAOJhlrXMQPqKTrPMxYv/yPtJRtOtQYldFFssUr23zdteGH30MHdQRAqN7hP9CnCshT+yTCg==","shasum":"b04896f65489714288cccb45c66214f635026da8","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.0da3ec97.0.tgz","fileCount":23,"unpackedSize":112803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaSSPCRA9TVsSAnZWagAAlbsP/3LaHKdTUsMwUb70QiE0\nwEbwhzbm0OuenPYjXRhXdMeycmUUKOx39dG8SM6FDKwGWOtFjBhHhKBAigZl\nyto4wbNPTsLIZUBL9W8u/WnmnE13PX1k6UrdQT439aCP0TrYcLrAIh5UOQZn\ngyWWiK4UtaEIJYxCsVxebb/F00NamzXjVuj6iK01eFSiLTfLewtqZ3wAA3Kj\n1LJ+yOYRJ6ZnrHLeh1nH09p3J4g59ejce4tvLxSeyZnqPDBTCp9xuxVnTe9f\nL9gtQ6poh2b+K3GNgqZuozIypx5c9i1B0yr3r2OflXxMH5lS4q/ubZIvimv3\ne+0eUB7Y/y3iJbq8RVGO7Yo3nD1fritBWRh8JOQpZ7xGurhm2atuWckvzghi\n7PsUzN4IquqpjnAMprPtQlcwvHcdHkuyvEyOSegn7aI4+wYUtkHhbwKg3VqX\ndSzwpFQsL1TrcThaZAmwDB7LqhBi64YXZqqVW8XRMSG/HGE8B0rgdMDn7XEj\nQRkc1i52kU0ONRqJYItsd9Au4O9PGIAZLJUuDGUYuhYLT/G3f/mnboPxHpIM\ntv727tJLv9X8J51z+XaMTuge6HVYEipcVHdsnL+LYZ8KSIW3/Q8cRZllX2C5\nU/s4NVT9/MEmz4dVlpgzfRUNiurxIQmrs7RuvFhM2gmv5gIlZBVsfo23MKRs\nAby5\r\n=nJCk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCu6g6mve+Dk33GxMKvDXUnhxoIPEAIbRWRkBrjbUXSUQIgYJLDkIT/VAmlWwoA1uHKr9PXoQ2N9r7lAOE4z4t6E0c="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.0da3ec97.0_1600726158853_0.46452505165390146"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a0793c96.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.a0793c96.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.4e5c350c2.0","@material/menu-surface":"=8.0.0-canary.4e5c350c2.0","@material/mwc-base":"0.19.0-canary.a0793c96.0","@material/mwc-list":"0.19.0-canary.a0793c96.0","@material/shape":"=8.0.0-canary.4e5c350c2.0","@material/theme":"=8.0.0-canary.4e5c350c2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.4e5c350c2.0"},"publishConfig":{"access":"public"},"gitHead":"4332e148b28dc28d9b324306eb18987b31a80ca5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.a0793c96.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-+LTTlwQ8/yHUYnlpBHLbptAoSHgwWtAUN7a+WjXie7Qz2ngFljvmYttYe9GxIJbiavfZWblGX+K4IcPCQaFEAA==","shasum":"b810e2b0f30f589c8cc37dfec0b9b6af5f45a29c","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.a0793c96.0.tgz","fileCount":23,"unpackedSize":112803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfai7LCRA9TVsSAnZWagAAaUcP/349FVg3XRh44a4dKlif\nYkLfy6Vx3fk9+fiH5ltxaYDzVXm17QqIrwoRF1tzbTvrPXtE7X1F/4D4drob\nD1V7lMyPPaVGAjSrcF0AeY3bG2P42+6RlNIhHDzSkiEeSiLjivV5lDwavQS2\nIRV3400BfkXbsCxJFtCQ1HpOkkRqzZltjsLXnOxgcY9lQIxAlfZflgaIfR70\nBYIgdCa0YCk6bF+z78wvWSvvlvfhkgpWf/PoLsGaZNfKcgSWl18O9eSGgmhs\nNvD17Kl/H8DOD37zcKSfpV1XX5+KJfYY6Z9B0DciQOafZ6/Vy7n+dER+pSwk\n8Ftm35aS8qRty9ZnCiHNUlJKzhkdkzsvL7oZxbR/G4SNYFb/6BetNoiAfSuK\nmDxDAGCF9Uay8JPk7wjWYoN1eJgkG4RvChA9MkuFQSqOjPwS1p1qn9lsHRd7\nug9jGwQ+vKC9cgLqGREy1FHCoCADB8AUELas83oNc4gzQoTWmdpkvHeelEWD\nZoKwn32SgJVTTE2+PRTJwoFgsD2GTptXVuac1mPQEVG/RJh7wflpf5OGn73H\nBiml1RI8ck1WH6Nw09iOzHQH16m45JxC7GtpcdabxynqvucDJAykQND4U15r\nnAI1l9VMfKBxwO+CNM9ks6mrX07uH5ejoJtVYx2k/3IaJ+TzUAdpL4hYvUvh\ntSvz\r\n=UrGp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8SuMgYcLNphVGADcTeLjGeSFt+UPqSuIwZAQjglbkDgIgY9lgSVtdYjEKrggUFzSq4cHnK515LEC8H1bA2seNOEM="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.a0793c96.0_1600794315143_0.9750284443362296"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.06998a3e.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.06998a3e.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.4e5c350c2.0","@material/menu-surface":"=8.0.0-canary.4e5c350c2.0","@material/mwc-base":"0.19.0-canary.06998a3e.0","@material/mwc-list":"0.19.0-canary.06998a3e.0","@material/shape":"=8.0.0-canary.4e5c350c2.0","@material/theme":"=8.0.0-canary.4e5c350c2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.4e5c350c2.0"},"publishConfig":{"access":"public"},"gitHead":"decf3423597b14fccc721d29e0ec911320eee3a2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.06998a3e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-TCS+ekAYR5UviUKVcztRyc+OiWkBcnoNmdOVJKvk+4e1oRnCWVwoaH9ZQylkINtkClaRhci87Lg8XtBLxGiEMA==","shasum":"56f14033686b89280b2204fa91a604258327bf6d","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.06998a3e.0.tgz","fileCount":23,"unpackedSize":112803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfakHRCRA9TVsSAnZWagAAaFYQAIIm8stBdfyX20bZ0xgB\n9PKunEWdLSHpbJWHyNFFwsrao0BWWj0q0pCzxeldP/KFmyd1CFHAiltJnLUD\ndUAAOWV4Rs7AB6akv/hAoBeKQcKLuamwskRSUJUQgYcThOKegCJOA4YzxHTe\nyz91HYcfkn3xg0kyDq28rLntJjze3Q8GZtRX8G3NwWS8KgUjGjYQt1NiMiQy\nPC8QwmbLh3rGnrfjPP86ytgVZtQolmMmrJ3E8b4cFtHxiYf1OUi8TYGEYRGZ\nlNg35F+7t+um2s8ZinD0dwA9tDvqFkKdcHGVqrr16iG/F4uYRX+JJltPR8AQ\nNmRggYdPkdubAv6LLAqn0zURwjjnJeeqpWc3kxnxqlFvgsovGlczmM5y6brP\npZOuFNbCjcoa1OK4cM0cQuhXfRSKMStP9P52WAUsO024jEgN7feWvIInDzRv\nsV9H0qRZQJOvXQCfb8K5FPxHh/ojHuvyEyEKgHgJtZo8Uqy2frsKpmR7BCtc\n92k8jg/sGW8clx1xtDLLqDNyISQw4ZGTLB8aYKlizT6uyQ/uNsVC7xiSVUqj\nBRqI3nr4FE5BLrZev9TwJAbxkhOIjtVscNRMuwCNJvTTB3i4gfO50tTeujHa\nnGA0xdMrmt71WL0/8/QnglsBYY9MXfW1JuyYwRGNSXXKY7M227sz38y/Moxd\nw4MJ\r\n=ttz4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFYSEIyV3RkTp6jz/iCAdtyP/Kj8wES3/c7llmrtm6OoAiEAt1M8K/sm/1hNsm00kyB5HAuWM7oGi5rX1SFrzjKxDkw="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.06998a3e.0_1600799184969_0.35868307058631976"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3484a90d.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.3484a90d.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.16c563ef7.0","@material/menu-surface":"=8.0.0-canary.16c563ef7.0","@material/mwc-base":"0.19.0-canary.3484a90d.0","@material/mwc-list":"0.19.0-canary.3484a90d.0","@material/shape":"=8.0.0-canary.16c563ef7.0","@material/theme":"=8.0.0-canary.16c563ef7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.16c563ef7.0"},"publishConfig":{"access":"public"},"gitHead":"9a495a0451ae2f8e95b786a624153a7b57c4760e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.3484a90d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-lfnGnYTOdHzMfbh9gdvN48PO/3a84aoVxxvvky3+zAoW71SJd0hBN7M64SkpDbeGlIYMbtuprylsFcXdPII1YA==","shasum":"8894675c0b04b01e66243a936203521bf153428c","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.3484a90d.0.tgz","fileCount":23,"unpackedSize":112803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfanUBCRA9TVsSAnZWagAACTQQAIY+qFs4n/SIdbYyRgTX\nafOfLSGPUtJNEpzI/ulDu0/rlQxTDLKdGzQNZU8jHGXJJSWWZP7FAPyNHhFX\ntat9p7ywFF0QuxQ8lyiwBGwJRuyzYPidlZ/6dFYDu4BMEivV2jp9PK5R13Pl\nlFcGcvtK2hjp83gP4UHMSOYkfQC/VwTzYtPE2B2rMvClyCcUGPEOyfeenok5\nWFkYn9DbG0IjOoZE3h/XGZGjenI44p4MZG+gtSbUAWTmpnwU0OJHEdQ4io8m\n7ipynunO8nBo/uoktQv5uJQzlLO2HTaPvkTQy5TucGwe+BAp+kmiJEWGFoeC\nhB5teOT4JOFU69vK42G3/HVbApjHaFzUuKeYDKLc5EHIM5+m+mt5kNDdKCLd\nae4SvBf7DaPLxb4hUb01fV42C1BiGzV/vauUf6pMFNZlPa4AR7GsKAJf8Wn9\nV6w3nOyNixLFE3B6HgbVzTGNOdK8MFSTJ0q9F+vz9T0Uh+wTiEwET7ApDV12\nGazIp7gZfDu7bC4j5rBJ/KQ4ZJjOQahxcrMMpAZJZ2dyYmiN8ne1xhXW98Ah\nE9jBwvNMfkj58ohO0kzuk/g6/SvSCFEAnFdluoSO+7vKQsQA/d4FbStjStNI\nE2kM8CE3WYUJs51mKvJTLsVM5RrsGvEpLzfn1/JGQVu8Foaua1plgru0t9qL\nbFDD\r\n=RcrK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYNRPuekLaAcMjHDEkMoaAnLuTf98MQpOgX9ZWmh6hkQIhAPfJoU5XhfN15AHgLNWyOkb8q/6F0dy5dZWOWXM+Xdr4"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.3484a90d.0_1600812288690_0.07025166166331887"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3f99af40.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.3f99af40.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.16c563ef7.0","@material/menu-surface":"=8.0.0-canary.16c563ef7.0","@material/mwc-base":"0.19.0-canary.3f99af40.0","@material/mwc-list":"0.19.0-canary.3f99af40.0","@material/shape":"=8.0.0-canary.16c563ef7.0","@material/theme":"=8.0.0-canary.16c563ef7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.16c563ef7.0"},"publishConfig":{"access":"public"},"gitHead":"9c1a716646d54bc9aebac750a99d1fa752f60d9f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.3f99af40.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-cvxFwYkls+ma6X4LHzu9vXEGZT75IE5dA6D12R6vPHkLICF+8B9gnef8kOTdYnOAj/Slyo/hKgBMENSEZSqvAw==","shasum":"f05a8b038b3b70a30d0fa77721eebca8e3f79094","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.3f99af40.0.tgz","fileCount":23,"unpackedSize":112803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbSodCRA9TVsSAnZWagAAwxIP/iTtWi1kjdmcso8xSDm5\nBkZuRgHL8NnHT5kgyIj1eJMMIET52qSpjuCWNc3KApqkFcAhEpwpXJH9Ytmq\n4Jln8kBqGtDi8QnQsToaEagSzP9nD+E6lII+WoSPySQe2T60+g2QkyIb3+jK\nGyUP810PgTnoEQSqeHdHCczhhnqr+qJ/rmo5xQnMlM40KhF3jUDi3J5rbSBk\ntkszAgAJqB6eMaZQt1vxE9LpCbwTSzZ0A3Wn21vXgyoGrp5nWQ9QHkaP2COE\nWyceNPfmp9reGBtviQ6MFixXencuqbQX8eK13btOj3Duayjc03AZmNe1+rM4\nfsVsf71p24n8zcKJ9GdD3DqRtZWXuXUHrdLJYfWjhcaWz1ktOTC7Mwcd6XUY\nTvNAT14//+yDlohl8HdNWDD8WZDDRDhETkY2bY3bsIhNEfhG4uMwna3Tqzsv\nc4AWNdl6LThpyMCErAgrHBxJQtBp8V5b4UUEN5GK8azDcLdH048mlFkEHPs7\n4/I0c4eYWiJtmMrOtdS18xe8KHCDZnuLVtpg1bcacX2nOB280LGzrHDGiZ/Q\nUpZRZ9Zi4SlkGJ7m9IjN+bJ5Q9Zo6OhEP0cjV6Ze81D0fTIWtnLeA4MDVCsq\nuRqqadfVRCbIx8I537spRFaYvjg7dNblXgYif/5ejqzmmfnC5eSU9J6i1oZd\nrOyT\r\n=48k3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqvGICfiV3cZOqulUCgfhcUOSXHxYL3kvuF8hjXusn3AIhAOnR9uV6EfYyk6dLeDFGAWCifca6It76cMFENw/kJtF5"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.3f99af40.0_1600989725527_0.16497759787591026"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.72aa1129.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.72aa1129.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.d4cd83a85.0","@material/menu-surface":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.72aa1129.0","@material/mwc-list":"0.19.0-canary.72aa1129.0","@material/shape":"=8.0.0-canary.d4cd83a85.0","@material/theme":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"b0de5dacb779cde3abc9f66672e5a936030fe63f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.72aa1129.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-NzTZpnoxcvkcQcZXKVsuipHJlm/a1IbQO/fjv1MR2Jkb23IRTMOar3byWTu2NDXcVBGAEct4Z6f6Mn13dZFP6Q==","shasum":"41597e410a2280c6a7e2f62b95621dfd7fb071a1","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.72aa1129.0.tgz","fileCount":23,"unpackedSize":112803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfblwxCRA9TVsSAnZWagAAWe8P/16yJhgP9WqcxFpu49Oi\nE4nAaJOYeZLRxER3VO4Ep8xA5kMypwemdpHggFQdShKyQwPXUt799oAOzdyf\nsRvzHQxTgB8RdF506cMWRVJpZJUhxueQPc4xTKFn4GACsspVhN5uFCoOlDQa\nTmuAhrUjX4dGAGYtbxC0dy7BQ1xAWnblaDZX7NyjW+AITCBA2JNzCVyf5n1U\nFaJ49mbo84rQUnuBch22oWPioKNezRhIDcVI8oBhrti0FtlTmHRRrnvC0Mnb\ngo+DzUVrUwEE4UqJ170A00TvnIBfHtqQb+HV66Ryh03K4UAWc13KoCTiwxnl\nkkvj5nafIWWfjLUM+5Oc9BvZ+GuH6jhObUFknorJbqiorUJ6AH8Fue00hv+J\nm98A7PrmtXA6PxvzP6yyj0nrkzO62A4FD+D0THbHsFG49fEZqyMi9W2A81tC\nvnvGsLB5k/EN8momCqcQ8SvWlDJ9r7Q61SS7xvKj1AauteW9lbGcdLVj11ER\n5BXVnp4pXKwWlT1vgpQIC9G7eBoKopHw6uDCCXkLSYCI3lNB5f4VYewlc/RP\nHYHmioGzkKNYvfqR5xzSjns3ww617yYCEVXRzx96nyEI2HaY47l7AHzbgBev\nqCEwdfbqGlJmooPICc2hi+EUjv4ZvLQhzw54LhyLU3tZ5CJLMe4CnRgUzDBI\nxQgF\r\n=7VHD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2XK3m8PAmIOGc33xVFm7TZnZK1sDVg2pKXXU/dkBZDgIgEswa8b70bLOatqaZjj8+TmqpwXzNBEmjdLHt891Ps6Y="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.72aa1129.0_1601068081411_0.8911662976615038"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.394fd3f6.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.394fd3f6.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.d4cd83a85.0","@material/menu-surface":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.394fd3f6.0","@material/mwc-list":"0.19.0-canary.394fd3f6.0","@material/shape":"=8.0.0-canary.d4cd83a85.0","@material/theme":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"f7ed30422433da24768cee2e9ee84140331af4e4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.394fd3f6.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-HdLuN9G/ZYZ5wCCm5jndapF0hw1ajGgGQIYuXXk03u7RovmDhWFVMlG6irhhEgv/rNuF6N+gdIfh9wLK/nmQVg==","shasum":"43b362782b4fdc1adb04d85d41bc1dec9c987c38","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.394fd3f6.0.tgz","fileCount":23,"unpackedSize":112803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfce97CRA9TVsSAnZWagAA52IQAKEdO1yftvQw+vEwuYZn\n9D6HDzDGjZYWhl4H06BjNbn/nYAiM758+YGb/OhFWmlYCxED50oYHLIQL4pY\nZltcZjmCyi+YLt42OQQx0Wp8SATSdP3uT6Z4L0IjRVRp7ew/1DCrVxeyZaZU\ng6P8gmp8khJqs1jUJMViFpZNa8fYXBNhRAO5x/dL4+1UdtJh47xmcrr/Nl+M\nxdTNo6LIHoNuoGajW3Qor3vcuTh+vXwvO3TkcCd0LQkP0xuKE3I7PuLr2sMq\n+mn3A/ExYFDD7kOAXkDWs+EQPcZ4s2WYL/p+biwBX4anmc1L4bJz+ymCZ4lH\n7xV8XDQsl0djUuHMcNbsSmPtx3CfuEtXAfCRxnYxO+1p2/J0C7vtz4nMHjWu\nmzAKWGizr1gPzErF3ZjrAG8yi1Th6vqbvL0KYnVY5Ple9AYMe9eTyT/OhIH8\n3eqKzxVefRah141mq35ZK4BrOVfYO7pddV4CDpIqWK5Hyk1h/kLHLbVPEX6V\nQPNJpnAHiE9uVwXMbSoaLWt8GY9ZFD9MEPojFNUfJY3ztmPvcuCBKGQzR/O/\nn930BbBaJFDTiWJIawIq4pJ2IUqB/E4wSOwGvAk7zLEyd4rwFybgPKNUq4s/\nXCq6TMqHrm20rpcOI/4+RnbOK5ZqvT6N12yDIp1TZPg0VXbpqOuVngXrax6s\n9yjH\r\n=Weyk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGf+8CF7j98KPgKLY8GXzboEmcDctmN3/6EjyBq/wAbvAiEA6/qYJvbKUCLLIjzIt+SVoqeAG6TRuqBBn6aIm23DDVk="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.394fd3f6.0_1601302394622_0.892148741460979"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.347110f1.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.347110f1.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.d4cd83a85.0","@material/menu-surface":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.347110f1.0","@material/mwc-list":"0.19.0-canary.347110f1.0","@material/shape":"=8.0.0-canary.d4cd83a85.0","@material/theme":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"b51682018a9a68b95f2c2cf2ebd16682dc3f2e22","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.347110f1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-D567ATAXZ+EPcwX1BOyNbEp5UG+Ehw1Uo0pIRCHt56qf4QkKm0yzlKNoh3owQLFMF/gH4xrjLB6sgIz+HN90Jw==","shasum":"ba6670d55d6606f02c2cf2ffd267f78d393b1bef","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.347110f1.0.tgz","fileCount":23,"unpackedSize":112803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfchR0CRA9TVsSAnZWagAAxnYP/2E7u285c/h/ysNpwXtv\nOdQChQmFZ7i8sB6lRzvaaNZkXYZ0H2Bmxu5X8WhrcKPziFxn0t4lt2Ing0ks\n8r0/e7FcTDHScMh7wdu28V9rL/Ao0icdEnt6qsSt4cI1WZiFqUMEe1Y+tvHc\n8ulxLxPaIQpQj+G7670LY7LhhPP2mnBY9VFZYhStbxrNfT43163GyhN1W1jb\nF7Bix3owr53Z36Rjp8PAYexaowqpgm8X7ph8LEX1sLBcIwHLVnlImEy9T6Mg\niAYrc+riILHY6qj+VVbKHWAeIwrZhMzlNsrCpbWFkgn1726jlAil1d3FZA98\nXYZeFAFCXbXKYnXl6G1W4giLm2GR13ZBzDVhIYDDEbfuvwAflWv3DDEpGUZC\n7XGKIkNBvnsV/kref2tAweh2MEMLN1ASRUTtAHkGQyixFmcmf/zDJGk6PHxB\nedyp9DYnPRBCY6tej+Lh2DU4imc/1eMCXVhvzwKROP8mHcMfO4BhOVPP3xER\nEyHnBDQD3vsiTUC0iCg9AVNAa4MiLVb6pjOEORGr57/9Z1nFHY12DxQVYq/O\neadRgYqgEBkdrbeG9+uwMI7M2nx8HtUL+YrijzLRJPZpLuoroAcpbFLTYZJd\n/SKF6qrxK+C15M3dHIFgDaEweJhD2WPCR+ykrqFtMbc+dSOvwR2sIr8oWkUH\neDmy\r\n=5knQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJxaS96dstAgPAZg+QfgGn0VALHajHfnY58h1aDjZCNwIhAO8NFU8TkPvQ4Fkzy9Cgnt5LvkMcdNhCdWy0Vu/n310F"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.347110f1.0_1601311860251_0.8313763898719366"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5e330bb9.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.5e330bb9.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.d4cd83a85.0","@material/menu-surface":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.5e330bb9.0","@material/mwc-list":"0.19.0-canary.5e330bb9.0","@material/shape":"=8.0.0-canary.d4cd83a85.0","@material/theme":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"edd7d263d4d4dfba81c2b086b08b2be10b533b2b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.5e330bb9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-oNFp0Fn7nrfEQ7b5OzpElC+zzj27SmX+dRvKM8JDsynV5DyZOn2iMdYYbP0XJG5NFMN0fO9R0uSF75xs8xuMmg==","shasum":"8f0e3c55c05724f1a13e083ff875986adb3f2054","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.5e330bb9.0.tgz","fileCount":23,"unpackedSize":112803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQBQCRA9TVsSAnZWagAAhy8P/0lJf+nio9RmuNjDnNN5\nwyDoQQwZVmncAi5E77qlTc87oee5K9ytbjvxtwE1sKXb0DiygBJ1IsX8M9t8\nP1hlP2x1TnuxelUA+hODKeHubf2vg8Ygx5rt2wDRihtfv9XYGk8aWZKZ7dGM\nU87ZcyE2ewBzyDkyavABcUz/2wyWXa22kkJPwim+g9/9PNzshxhDdt85yact\nkjpCJX/xsr98G0LAgLbZBbCiOEIHNW+qlkOOs2qbgxrFl9Z3fKsVYnCwbUPB\noxzMHCSEyyiNCbFtfOQGSH0vD2Z5hxksSyq0kqxLWsOcDmCpPB+KvNKgTf2v\n7fMsigpQ4YRUP0mN84v7ZokcJkpL74/aktpkMiFuxsLPDWQcW7bOKGOoMRC5\nzWw5xAPdlSdy8BtSCtFoinMo+3yiUuz5VfYjH0mf2JBVgTqaDtKTyaLiFeGV\nqK7wseUB/220FXbJvXRSdpB0azP/rPord5AtSx4gHMlzUcLqgtdVlKgEj2g4\nLlHTrUSVmH7XjQtPj/FKnQG7p7m6CZquuaSGOUR4OQFc260kJ4+jqm9C/kUv\nTdKAOxkB3YAqvFJscIhd/y94hJxVwjIWc3P3NF5Nnjn79qlu+m+iqniRqGQ1\nKZ4CprP42leh2svXhGnwXE0uGAGA0Lp/cVya7f7epdB8vX5/uXh3Rw6IMYGM\nMlJf\r\n=fceY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvyOtrSFQQFxiOcybeKLePI1CURDmXIpexo4kewX63mQIhAP/rFrZq7KGdTLUnKucdEGqpJVGtgYbHokUu4x0w//HQ"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.5e330bb9.0_1601503312466_0.9009032554229774"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.30b9e3a9.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.30b9e3a9.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.38ef4501f.0","@material/menu-surface":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.30b9e3a9.0","@material/mwc-list":"0.19.0-canary.30b9e3a9.0","@material/shape":"=8.0.0-canary.38ef4501f.0","@material/theme":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.30b9e3a9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-0vMzcB3qvl23+5KLCZef7Jb/yBNqh4o/BgrV1wYuQgm/zDrAR9H6Hid5NmQPSUYtY1xvr87A1kR1jWutBbgx1w==","shasum":"78c224b282890935d74f6cff0e0746a2fad00e30","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.30b9e3a9.0.tgz","fileCount":23,"unpackedSize":112803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQj/CRA9TVsSAnZWagAAisgP/j87BUllfoGnknz16qJG\nckMHKa1Kv8LXlGj1aJcmKVxnsJ5qvvaAxUtynHyqk9JLqWVn/DQFiEucatTt\nBdUMXY88K4xq9g9gHtG/wSpBq6uHRESYrqeTUyF5ao7boiqPeOcfwhhZnB8q\n1wpvsim8HuJrtLqYM4I9BGyhNEPx9PdHg8wMOM3DhX5Au3YFDq/Jto+y7nAO\nq5xAkHaKoH3INnpeJTWVdHcX6NhABd+9haSbbRyvUHaYXNhFq2ySoFacD4G9\nYXytosH3o2AEwiqgBlam5bh4UKETO1l1Pn8U7/soZUXl9OCozlp+UKylFcqn\nhFR0xN4NN8McU0j4vV7FF24dYyqiT6cvVlPorq/HAqA3aHyKjDfWrPmWWECq\nCFq5+yxZCBMyWf9N/ZL4Jyk6ystiv+bj6YP7FloJcSLIdyfkpzgZ/7Xrufra\n+oLnGWCMEoaO0SYeIP5/V/r6Eqh+kjoLAY8ME9WTQcKDcgXRe45FAlBIJq6y\n6EN71kcG7EafRy5E/qzvukXr/gmkF+XUKHvkStFfU17jpViag5h5JKM9G7MK\nsGhsRj1MZhZnSMnvmhMKJ9AAiq9D0AondwCDhNCtlyvkOll8lvGmDBKNcsxz\nOwkMpxg7zjMfUZkafwmCsImcAZkq7iSZ1Xz69sr78NPTXyaEjd93bIG8qGXQ\nnSje\r\n=YNbj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH8Sty9Sq1PURGbaeh+apzS+QDFu2qX95yPNK65UWe5rAiEApXk9NsxU0fzXdALoVSyCsVXeQz02InvMdQY+mdtgczY="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.30b9e3a9.0_1601505535539_0.8526774986692562"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.7bb04b9a.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.7bb04b9a.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.38ef4501f.0","@material/menu-surface":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.7bb04b9a.0","@material/mwc-list":"0.19.0-canary.7bb04b9a.0","@material/shape":"=8.0.0-canary.38ef4501f.0","@material/theme":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"f4137a832374dd43b862ca8a4db665a59c1a70f7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.7bb04b9a.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-572Hxe3Zwp5iuE/OKRBEL+tn5N8qqWM85X61cSECA5/4CLXxauwQTe6curXCawT1cBi9m4nQMzr9gTvr+HkNzQ==","shasum":"083a1b00e5cb0547ebf02bb2f9393423403729b4","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.7bb04b9a.0.tgz","fileCount":23,"unpackedSize":112803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdmT/CRA9TVsSAnZWagAAV60P/A6ct4m8AmdOEbug/vJE\nRqHNZn83Q7CrY3e3Rh/5sU2HVJ81yKDBCHaSwvm1WZ7kmiRAwR2GKop/wz3B\nEWkzlPIdOQNP/nqr1ae5h6ABd4bVRMgP4r1JhERD8wlJcH7+xmsE2AAmJFde\ncab0TOnwa8O738mWMBPIfJItsRGNejvG4eKOQRuPUvgMVA94HBFdC69RrNRZ\nZmr2w8khuf6iJvuoABbExVQeJ0zhQgHTgkrX+yKhjHz+edW2Dmy7C5kNp1nE\nwYSjm9YlSMWalPPOXi3/HxiKI9FLn5l3C4MWExGhRx/a5P7RqKEEn4KnhWKY\nAZM0ABqOTqgeDdNhMwuxIQl/UvlUt6VKS7J7c5OYaGFMpJOtdJVNzjIj1nua\nd9feBc6gDs6uphu6rHNFpBk3PBoxMSoEkOovCKb12Gl7q1pfnD9m079mInsI\ntT0YsE+4FPIeOe8th1qB3FPyHL5HgFwCbqUu9iR+UKARdTUjQEvRDBewrk3e\nIXJeJv2aZlRfTK6rjDg3fb4pavWaRQP9SglvrG+bGB0dg/+G8I2+2W5q2fdX\ni1TYmVuyat0GBzYKYeJRI6CGVypfEsug7uKqMcOBTF8Eevot7eQMiUt/vdrk\nfv5uOmOYSaFKu0Kqb7akRVLdceYxjs5l7JaxYexZKuO5PscPhysSm2KiY8rN\n2plV\r\n=xta3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGzGIygkcCwoJ6xQG6YeXwqreu/s+PM8fPe9/DtjJsq3AiEA5l9FTmV8Cf3r4hcpdKBrFa3pJaDXi+3zcNwp5DJUKZw="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.7bb04b9a.0_1601594622991_0.364775223953858"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.615d861d.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.615d861d.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.38ef4501f.0","@material/menu-surface":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.615d861d.0","@material/mwc-list":"0.19.0-canary.615d861d.0","@material/shape":"=8.0.0-canary.38ef4501f.0","@material/theme":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"31f7a82757513b3944c605422e6c70eef13bbd54","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.615d861d.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Ecz3lXufeysVZPo0IK/XDRG8yDNlwrQz/CmKMnl4ftq95waKPgwlmW2Xb1H2D0MKBig2ukACmouV9iIuSwx1iQ==","shasum":"f5c6b5cd1602ab6d7786a319284185553db1d520","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.615d861d.0.tgz","fileCount":23,"unpackedSize":112803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdoOPCRA9TVsSAnZWagAAMfQQAI9GV/YUJRlSGrmlF73o\n+nUMuVaigjGEdbAgBfWm61oZw2ua7BAIW4fS/KEmAX4REa64PFb5n59hCttW\nQyevQnEwIkVFjTxDqxzhEwn/n7vsJKOQRKoIJdVd24kyF7l+LAYdnEI+kp3M\nzHoSsz4y7m8TH47ZJpEq+/rpiifWvpRiO5GuanlDMjjb62P5KwWeEQ4fmiH5\nDVhR2gGVbqvO2gpB0AqjxlnIL4kBvGREXlEmEq4/RZIrfVb8x2FfjNgmTw1i\nXbs7krYuujLIf8/5mTQlX5GwqBg6FoCB32vhQX2nD0u5P05sEixrIDSCr+4j\nQ6cfEmrz7XPVVEx125Bm/+l3CKExS63pdDID8soHWXdPIl98i1vcbnZvs0hb\nsqI3xC7VshL6OKS0QgK/AoqDOMZpGTub3W1bnNS2LnXGz9ZKU1u/1A5VtSsx\nl6Kr/N1Su6dg4b+mjicn/uTSY/lrWVgseg/Iqmd2cJW2ZcRzge5o8id1pkSO\nfH+VGEjckBr0afl434qVkhyD6al9KiMAOFDcW+XJytcDVB6AaiqHe+MBTaa/\ntW+PaywzwWUsAiQBgT8zX6Rj+24FwzZinb4A4prX3XLmy4C3EWFs0uy3GoQY\nbiK/GoGcXQfIF2c/ml8NBUJPz6tXBepYgOZIL4lxqfcb/iZ9Y0dDxm2iD3eS\n1ZFP\r\n=flVV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFuDN7MRbj5WfjfCmZxuVO7CKep/3sLNR/1R7RVJ7+uNAiEAm7v8t5jtYoxkoUyqAXC7VzSqr7YOMH4EQs1uvtz5t08="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.615d861d.0_1601602446579_0.6420573069209712"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.af110e86.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.af110e86.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.38ef4501f.0","@material/menu-surface":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.af110e86.0","@material/mwc-list":"0.19.0-canary.af110e86.0","@material/shape":"=8.0.0-canary.38ef4501f.0","@material/theme":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"ec4508e75df333e18bfc60188de82eb9e90a6d01","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.af110e86.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-hryKQ76uboIoHQp6iJIiHBnFSWgo7OA9iUOnU2faJlOEFQVWMDFOT0wc15ZsMc532tDKeNDaVUyuvwTp8VNoIQ==","shasum":"0576362d01cb9044dfc35951e33ef2a2a2b94a65","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.af110e86.0.tgz","fileCount":23,"unpackedSize":112803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfd7zNCRA9TVsSAnZWagAAGJMP/jwLTIhicO1PhNlmO9Gz\nP8qZtSDSrlsmiySr2MtP0DgEpd4PtPTo0e6aT1A4joovaKnTx0jZ3cDJvX0z\npeMFxn1Cq2/id8db53xuiOaVX75YAKH0bi1VsCnPaXgiwKbIkwDgmvD9n4U5\nB4PayKgEhP2k0VGm7YQvfulmmacyqWlpc5TVJqWVWMtIPyTJBvH7gLbxvUbi\nyiBw+qpaS1MRLxDsVK98j4oDlK/tcwxU+YDXAg6vdVblcd0Y77Wb+pNF3Olv\nCk67+r1cmXQdpkcMMPErl0RfGS76e8i8GXgMyAnPfJot/34c0+MCttHfBaiN\n4FTBqJmUnGlpYhSQ24MoxQzPQBHzf8VWsE7YNSqVnvwhWi9196y+Ghf5QUoS\nj0FUSaNCkjYvq/A34w56kY9aEECCSo+xegvo6XADzJeKr8pEoZerzZe8nW84\nVhpiWPUsbdD2rnJv/WZ+7lH2t7PvJXPtxxbBhR1HHhpPsChgt2UrAAe9etUl\nG8zzWfLYsKYLsvFG9UHtyT84o8Kigo87nbD8Hjo+ncalmHQhWl1rc+DJiQNk\n/pa4VJL0WwXUwX1UfA9XqC0WglTqg+uR6KjaC1MrLaFl4U9KlajCvIlpCM/m\nw97qFvndBMg2agQ+JmYRqZdRxUXX/zy7M+YByeDYVSRGSWbjRW4JozDR6jbj\nTs3c\r\n=PSuE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBMYkUYWhy7E8/NGev9KGea/ix4BfqAcBryha5SrXlWvAiAxc/SU6JQZlUHXx47t8wjMDtsrZ112OPvGYi5vgqFC9A=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.af110e86.0_1601682636926_0.5770774426071947"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.89d27ca5.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.89d27ca5.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.774dcfc8e.0","@material/menu-surface":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.19.0-canary.89d27ca5.0","@material/mwc-list":"0.19.0-canary.89d27ca5.0","@material/shape":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"fbe5db689dbf4abb9f299c85581f7fb95f80ceae","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.89d27ca5.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-ApwhjPLjPtNpqbT/PXZQVrlqPtHFe8ZqSGzhCW45EaWG0NRw4Pw1mmZgQ8UA5znO+eEJWFcGq5DfnCrGMztIhQ==","shasum":"2d72ada22eeada3b690f136fb468b7fb96239a8a","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.89d27ca5.0.tgz","fileCount":23,"unpackedSize":112803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfe8gPCRA9TVsSAnZWagAAG9IQAJxf62WVo1dj9w7CiJH+\n3NvvTeK1YIxcF0i10WiWXAiKi+z9fl0f6vKfrEBF4MvkJEPC/qEDqfiRYtGw\nHJIlEdN0R7TWwUE5wcx0TeTlG4kIJm6b0ZF34wIBBle61dsxtINM39Unh9LM\nBRXk1A50xnjSGoFKf/8hUv/ODGceMRSiyihQrY54j/bp95OM451cI2O9zlW6\npGESnmj+yhCb4tLkBJ+1a1lqYTqcpkTPoQxyMCAbVwYMr/3WHDhhH2a5XHpo\n18C5WUs3NnDt/IzLDi2Wsl+C9+73zTiznkwbvfOcGzqpmOT5aXbzc9TFzjgn\nJURjjrc1bkWanhxQOulFPCRX1fg3VvnmL+mBYskw5OUOqWe0WSkqrByIrZlI\n16yRTBF5AK9QMsKpJEEz0HUvnc7t9GAHzk5jnC26nooKeUvbymni2KQHM98H\niiENdS+LesFgfKIZi2j50ROc9FVzsaY738O24cYYJLMdtN7yHE1cr4HSNsY5\ncU67J21IOoGZmWwPJBUAYCY0bXBmpTh2EjBVnjzeuvbJ+ixsahhu5D75Arav\nnJRzad6xZKrt1qLbBIQAkYp+SNi3IUZA7G9QE7xmsdeTSsDAirEZ2+y7Zgoj\nKTpE+1E8hZWqWEJ/aPwqF7J8I7pqcLAgpKIZufm93SZKsdvGPQkcMlZq9Hdg\nZoag\r\n=Dj8U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG0n8tmxoqVLXKuitnUAAjYE+yOaunj15Vk5YbfxZfzEAiEAoRunLJAXu3SR6oa14BXzLHZ0D1jxdSGvRZZgve6XSSc="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.89d27ca5.0_1601947663301_0.9477911442133378"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9ef2e7c2.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.9ef2e7c2.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.774dcfc8e.0","@material/menu-surface":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.19.0-canary.9ef2e7c2.0","@material/mwc-list":"0.19.0-canary.9ef2e7c2.0","@material/shape":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"05ef0de8978ff84725428953056488d768d115b6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.9ef2e7c2.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-CW+zrJxssFuHLCFrX969uiUBYOYAQI1PgNIqNKoWUH6GxKvKc+xENzD96S+yN7nnPVZLi/dhewCypim0qoBOnw==","shasum":"1e4fa7edbacf332641e5a2b9b32750f7b4eee429","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.9ef2e7c2.0.tgz","fileCount":23,"unpackedSize":112803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffQiJCRA9TVsSAnZWagAAv04P/RW0oNcJF+221lRzPOQi\nzio2IAUVSvoX09pPak72PJ3ELKth2obU5v3VpNzZMzM2sBQb1egGlHGExayO\n6KwdjvGRsWC2Bc3b1ntrsbYcHgxAouh6YDq2SxTv4uGnmk2XDdsnH1hTAGbu\nnOlSoRfMA/xnMU7F+jq6DXm8Bm2wwVa7Uul1/v6X+ruBAyEB+eG7BT95xMP+\nF6r7gLLDb+chxd164npTkE4hSDJzftvtxAHTiBVFgRuwoZEGbTQY+p/dMDgd\nK7ldjbPKi11HzXG6PWPmJMYU3eGK+sB4WHQEI6P/wc0HCE/5Y4LZtROG5b2u\n/hPsmZ+ptBE758nkZFwKrlkVq7TkrIhlq0bd85Ah9dYLqt2P6FphWNxgXRll\nHI7w640fa1tKewaVaNKgl56oaiy0BcVk3pJHf/rGupm/jAndVqyhVThrx04j\nJMYC7a7ptfikK2F/BWVqCovOLD0clGQSXskOtjvXorx7vKj7QGNr+OMOYwax\npRA2ww6n/EkiPHNJHlIaU5TMC+JtQm6B3RylFVxXdtw6o64IrHpEOlDSg7Sg\n/k0CwvPj0RUGYGHuhtNvJ4VJgf0YGXMos0Bl8A6QaKUoeQxF+aNqw26yKuSj\nZSQsSEtNf7P6hokbKG4HrGHwwBx2ym+GcuDK4pFmm73M7BebCNCaFE5F5uCy\n1xL1\r\n=r+Js\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUL4o106fy7ktGyZwqG3ha2ktbAAtCQynnIDCGf5kmsAIhAJFdCiesmu/v+dRMjl6m3FvE6wUVSUitESmyPZst1Bni"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.9ef2e7c2.0_1602029704867_0.40695627914320776"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.96c8bdc1.0":{"name":"@material/mwc-menu","version":"0.19.0-canary.96c8bdc1.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.774dcfc8e.0","@material/menu-surface":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.19.0-canary.96c8bdc1.0","@material/mwc-list":"0.19.0-canary.96c8bdc1.0","@material/shape":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"1107015eb30f3673820101dee6e42cd62841721c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.19.0-canary.96c8bdc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-NQVCtyrCkpg17QEBIckfb//YKB/7m0r/a7Y4H5HpyD+D2uNoMNou/h/zgOUYRB3cyPI+V7qmxiZvH4DlTT9o5A==","shasum":"b6778011f0f7b3f0b11459b32ae0da062bd91e78","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0-canary.96c8bdc1.0.tgz","fileCount":23,"unpackedSize":112678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffiA1CRA9TVsSAnZWagAAIKAQAIARE29X4+1hKrKjXBRA\nskLSa+71o1OHYvjKfOJWlFmResPn8b4tkbS6hEWgAazRkmKgRgEnXub9lSLH\nG9xZvSMfJ0jcbgFHtPgvDpRCt+bOm1vqJOpPMu1x7MYk3HPMQmB3fV6ALEIl\nJigs7x9u7BgqhErLLWl6U0h8tvTpfZw/W5Z8ad+NAegyAix5fQq3Fy/EAlSG\n+VTPWHt06JB85QBcz4oUFBHx+dhwMc5qbJilB/L0Lt/N2cQt0gyFcj6EzRhp\nIHFflb4cYlQwikPHfk+axfV4DCaRLAMtxwO+BWvvZOW0DKnVelQoKVbmrEk4\ny6i5YLNArW3ghh/LBr3s5RQ//LQqbfg1h5dAN3vccr5d39X8az702w6KMDDy\nItTvr5BLUnXlcBCL+p0qaj7Dlx/63G4TRdFY3qSno2PYdFpQVbOECZ3IM1Cq\nwm+h7TTpF8hwWUKb1UOH8b1HxAGwf+4EnBWvV2lnjZZrVUIOQuuRIXXclN+a\ne1klIjhQnaqgl0+MxXAEa/Sm+/Fo40/IYzQJcqW7O9ZoK3DiCcYIgNvju1ec\n8pdqlDqtu5t2TsH4xOmjgTOHezb/7ws9EG109JkOVO9pf6oakq+/YxYKWB36\nnglzjphrbp4EXsjDPt+H3MehHn7ZHnnVI6m9dnksH9qwe6J1Yfb5hVOY8Jgr\nd0UC\r\n=zE0L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCKHeGVhE7m5ru5d5J9Z+HwfiDX2YQwHwdyF5xmWWnP3gIhAPoAQ0hFtRE7jbnr1UoRmjX25WMDRvpnejwEnau2Nnz3"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0-canary.96c8bdc1.0_1602101301446_0.39798742638807383"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c21f034.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.6c21f034.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.774dcfc8e.0","@material/menu-surface":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.20.0-canary.6c21f034.0","@material/mwc-list":"0.20.0-canary.6c21f034.0","@material/shape":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"367e1d2c78522b5c85dbc2693548d691c8b84d59","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.6c21f034.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-IGRL1/w+RbG6HE8N1nXix64Rr976Bhxd7uPV9V56M3qzyGmsLDuXZDwdNYBsgX0W4OtTl8+1YnltVNFHWQDDtA==","shasum":"dd829319bef39cd1220cdf2e8e800dd986e4b825","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.6c21f034.0.tgz","fileCount":23,"unpackedSize":112678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkGuCRA9TVsSAnZWagAApZEP/RV1hBlXbY6zEKHhUCMa\nQu16UW4nhl0Ebg1PybtKHG3acX+y+h2s3dYAYL4kvhWZxtvXKcVa4dDfaP1/\nQ6kr7OaT3fqr0Ms8sBJ41XJ9Slp4RifdDXBcx6FIAHpS/dKubS1BmnlCRk/+\nEgT3axX3j9naa7vbR57iTd/V8s/yXif5wHecQDlLerymHfr4E98UotCoDPX/\nyXjEZGuHfYxAJ4Tv954QfJ34ESiiHe6ZnGkpEmc2lPVhOO2rE7/QVU80OJq9\nVDiTjZBlP4W425qkKwOEB1YiFupODB2PmCNPZj1Ye4eCG+QUyLMnUnxwII3C\n94ESU7Qy2zxv46ChxoxWuRXsl/4kelPHFQ3of9YD0wnC7nPDdWfGUb7KKE6W\n56CsFmkqPEit+E59JIRBg64jMnbjvz6guityLBIPJ+RfIvAHaipbf3lal+Wd\nmZaBoxgwi5hVSHbEwBTNCNyjzp3xqMdfbxwAyryn0q89v5xkjqkRERQ23Muh\nVlrP06COLlHTqZBGFVn7Uukh8D/afUJwE6hQN6yCfibwratQTaob/XtWNqB1\naGa1BpLArfjPXDcbh74RDtFmeuIWVBuKg+w43kL/jiLMAvJZp0eQofC3ETPA\n2q6VHH1fg+cVvTxVmrKYI+D+I34fEJrHWsu5nY6M1sCybTZrn0pEN/SNOCsE\nhQHu\r\n=LeZ0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBlv2nYnZ7DpPtLiLgafkWopews3HJuCrsm2Pv+ltESlAiEA7KMRETPUhs0gX7Gu77iO7GAE9RfKbvv4AWJ3Azc2XjQ="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.6c21f034.0_1602109870185_0.4012620277227408"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0":{"name":"@material/mwc-menu","version":"0.19.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.774dcfc8e.0","@material/menu-surface":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"^0.19.0","@material/mwc-list":"^0.19.0","@material/shape":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"6c21f03466ddd0381aa030eeb2fd8f9615a3ed73","_id":"@material/mwc-menu@0.19.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-q4Xq4b/KfMJURKSquvputtGIQ3REOSj2qzEkH+2U23Toqx0TH2zHncGDSGnjd2dlcUt82Hq6gTgRr4t8c8VKGg==","shasum":"4d0bc6f9ce491a0f462232a02d779eee0abf1127","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.0.tgz","fileCount":23,"unpackedSize":112626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkJDCRA9TVsSAnZWagAAcTAP/itbEn5QCp4BNJ9tGWgw\nRTCZ46W141Ilh42leAMT+2oduRte7aytNfoRnFAdnPhh6xDojc8FFGtPtibi\n+cPtocTqLBAi5f0HOrCwzn9YZt66DazXyLzIeVtw06pbvj6L7/DobM7zEVgi\nSJ6YYyxvj01QdlGP41P3+93hNwPGR2kB/L1C5CTrDeMCS5icgWNJL6ZZxNtX\nUGqH5BGbxUHDbb5EYbgBnQY5rGCaBvVG4xMvECNndHHybIY178x0JN8wns7u\nuIAB9Jgit7KYhAcbL/6Y/DEjwDcF4mvG3eq0UwF3Ke/lz8zKGysHV96eAFNk\nNt4tWrzI7LdFh9C/sr2nx/A2xUKCxB/DyJklRmjQlrYMQVYaU2rxh+pZX+Kl\nomVc3vtztW/PtCCQS4GyiE7GW9o9zYDAOjr65GthSGNLbF6Wj2mz1cGyGHAb\nwfnvMEPSWWtUHMru/IEMw2jihKPnvycpZFBrvFEF4wgKPuuZa0azmFmYxD6j\nYFNllmdO9nQJNO8ICjKWCxVY9dfL6/Q8w5SYMZrw2C11kZwA3LjDHZho1d6w\n81V+LD5ngdW/mIdUljEdVXGQocWBhKXSwcHxq8T05iUubB0kJy8x4d7qV9nJ\nSgfcCsAkCHcvGEQ1t1MU2qhq+W7sjibT8JqUT2G2V9Kp8yK8qqipwM4Oa9Wc\nWi22\r\n=icWe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCirrZAr0LJ9Ld5HGt2ESpVr1lLnMcDLpxzszCKIaaJZwIhALl/uximaH1BeMEEtkO4oI5hv22E0guwewkRNP2FD9tb"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.0_1602110019248_0.9133683207125756"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1f026aaa.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.1f026aaa.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.774dcfc8e.0","@material/menu-surface":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.20.0-canary.1f026aaa.0","@material/mwc-list":"0.20.0-canary.1f026aaa.0","@material/shape":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"3082455321637675854584edbbfeafa95d95dd1c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.1f026aaa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-7s9PGJRdJViSky9PLfj77Co8pIMq2LPDYQVdb1C+y/vTN9HIbuZDYq53hEZrjMP8El0kwMLe89unRXWDMZ5+zw==","shasum":"a8c132251dfd5d364b31ff82d308aa4f3922b0dd","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.1f026aaa.0.tgz","fileCount":23,"unpackedSize":112678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5idCRA9TVsSAnZWagAAWo0QAJ9HhPDfO7v46tJ0z3Le\nDdeLOdEdDDWqYwN27J/KNL3nhl+gKUCraKD1PdOjg5vhkRNTsVfh20jVlnwC\nxd976LiBE1cTmy7U6wOb68GmJthRQh2p+vXl919WNG76c+UHkQaluHrp2XDi\nCU73D75GLd/2SiYvLgUiLobf6MvmAhNied5dt08AMQMQ+LCLxio59XH9lKUu\n4fdEgSv2KwY0STCVTBI0AhRv3T8IksPaZt5iW7S7PFG5+XWSzrRwfAOGfV8g\nR3eTF9TKxfOOz0hPOn9+u1DznVGz7Hf4+X0+tgLcsCNijtxRD+l2qD1mmmlY\nh7NRzGsUxVSFV7JzRqNe1vfwU3c4E+DAHi1UuorFZi16bi/QBXQiT8sJdj8f\nL9nxBGfwMUTU+nSUrnOFCkW63tjVB17ielPmvTvWhNPxZzxbGPpMQDCCPu3s\n+hVu9EOt+QbKr2FqkO9VehBJ58tv/tSnfMl6qp7HQVXDvdnmANMAPznMbK6X\nP6COerZukNyn7Dyd6DBajOVJJZkg2Ar1IGej5O2aRMPwpQjEIlzZ2dLMXq9x\nvjze+pNL6qXxtwdpp6shZT/W+DJkbwJdrJpZRXcR/bHRSJEC2/N4Jq6Y8zB/\n3cPIPTivtUbCHEwCvhOUvMRz9m47rIiEN2LmxXtAbOWnsv6o2MU/2oJF52hT\nK2Q+\r\n=MX3V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNKn9ItfEND9LwwicLiAyefwTzhOt52+Ra09KqfEeADQIgMTbYiI+cPbe5vlLIFky7EMB7H4b2GdBvHugJTAKkF5g="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.1f026aaa.0_1602197660986_0.6859524341420415"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.1":{"name":"@material/mwc-menu","version":"0.19.1","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.774dcfc8e.0","@material/menu-surface":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"^0.19.1","@material/mwc-list":"^0.19.1","@material/shape":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"5f6894b191aacdb7da61e0e9f91bae96169fb190","_id":"@material/mwc-menu@0.19.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-s2XV5IKwX9fbdWbLbslQGIvo1uIqvNH8cAZiw1QkGSFaosMsCVihpOk+5dh+WF8NxzbaDepZ1h3Amr0DXWkSXQ==","shasum":"7230239247ccf082808f7f0fe87dc1da1457df92","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.19.1.tgz","fileCount":23,"unpackedSize":112626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5ttCRA9TVsSAnZWagAAr0UP/2JVAVA03sEZnZ4R46Ts\nbSBxyO8oey87ZeGfuc4pExO9ICZcEJo8pULMK3ghAh8oU9rpDKBqgZsRHJ6i\nYCRpuiKjfpR8/1CXMHhkQZbyIJhBNPWf8Z4Iuv3vNwR03q69YbMD/jSMY3Rp\nor0UZCDjDzkeaZYsbPt87aVsLolWE/5KtaelqFLFSTuz+oSwA6F0icn73yB8\naVgHv/7DoaJkqAqZPRUFLPSVUhOxvxoF99tF7NI5v455OBhp6+CLEZTlt7ht\nZpDJPXaMp9Wn5vLizVaVZ5iXKK9wvuQQhUyPbgyz38gdHTqCuNoPp0zfSeCl\n0hJd/qXmcFjD4jcpZpvz4uvg/mbuTHMSO0F2MoUxnP4z9iuYa5ULJ2LblqPl\ntcNt+xrkE/RV/RTR4j0ODhiZ3p6z8sjaFoABqJ3Wsc5h4Akw70gSHevcVXn5\nIFxTCA1AOk5O3q4sP9JYLszbV7RceUuEgH4IR9fjiLnEGvTdlf1UjcvBxvtP\nfBDAVqw0gOYOqTnCjIEffU4VaYumcgBtMeWBtA3nnucer9dvSZZyyxNg9Kel\nkn8MNp+1Ve0aIlCIctuZBcvMq7X5dq2CJ0GfQh+zkxyMcjUp/iousPsrOX/E\nQ6BL7B5CbNch0mOSO1q14zFA64AczqW5LSTjnKLtOVAXr2Igz2PIqRqyZulI\ne4wJ\r\n=hoSw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgRegIb8bjCfUW8mBKV3Fi25SpmzXOKtLiEM1nAya3EQIhAJvmWtp9gYXI55OKgQp2GiGjkRdRBnjWnj1lmaiEs3jp"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.19.1_1602198380881_0.6693324206754878"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5f6894b1.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.5f6894b1.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.774dcfc8e.0","@material/menu-surface":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.20.0-canary.5f6894b1.0","@material/mwc-list":"0.20.0-canary.5f6894b1.0","@material/shape":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"63718fb08d28bef1d0a9044bb2ae8026b49541a6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.5f6894b1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-APlxY3dternPOpBbaL8JRHtHp2hV29FKM/A2zmxFQ5Ch18MxoNRSNRXL+u6JNZylyuIrGAXv+tUUxFhbEcRXtA==","shasum":"b659ee1479b21d0c9fc63eb2deb05eb941c81e0a","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.5f6894b1.0.tgz","fileCount":23,"unpackedSize":112678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5vLCRA9TVsSAnZWagAA5ngP/i8Jqxj6P2m85BqAY8pZ\n9sehZ7WWBS+7ElN1nlC3R4VccErx73mssjsTiytR2TxodzNNvtsPcBzzEDxS\nOcFnscQmAM9oGNoY9ZzkKLCNCcon94tl0Q9SrzsoYMkDXjIOe1DPbmCxI4RC\nppp47HoLdyC7udqDh6VMZc7PBFakGEHfL9IzswWHtkkOI1A/fdBUbbg3sw3B\n/VHf/K0LY6pQPkMupTv1ToFzz1/8Vwoxn67VlJ532i2TH9P+P0TqOmBzt1eB\npMucppiXh5Fbmb/By1XI1S0H+ji/kbogXyCNZdub9VhvUaDSfeBIhValKOQo\nkh0wpZtn3EDC0seZ+PZWJY6ywVkFYtRYUt/KDodWdme2O7kU/I5y8vYppTM5\nmpZQFEEC5zELxAhIOHHPxnFv8bfHjoX9h9rj19MB3FzlQybjDIYxZOzGp2kv\nTN6TOMSJOonHQXqvYFix/qge9gEgmShsBD+y4hQYtPIyFUYAqDzlDP2TyscK\nWR0jspiLydKyJ745GQ3E4DpRJsU08L3ED8uSeldLV2UWPINOEK1fkh35TpIt\n97ahbW3QnKmDkMAaf5r31EgiRVdIieehgxyHHnjav6p7BBM6lTHseh6R7Rtu\nFgfqtTjPjQnJDwcBE+OG2pkXzcfAgSs2ifaANSNawmSKTCh+F90gvkhfLF+8\n5xTw\r\n=4CG4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDra+bUfRddGS0yr6gBapxyyirVQnCM9gWtfzH5yJFEQQIhANO+8+QcVYXm7Nbq50Wd5/siek3+9aEX3/PeMcn+UKV6"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.5f6894b1.0_1602198475031_0.8926595438618983"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.f6260d06.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.f6260d06.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.8a39352c8.0","@material/menu-surface":"=8.0.0-canary.8a39352c8.0","@material/mwc-base":"0.20.0-canary.f6260d06.0","@material/mwc-list":"0.20.0-canary.f6260d06.0","@material/shape":"=8.0.0-canary.8a39352c8.0","@material/theme":"=8.0.0-canary.8a39352c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.8a39352c8.0"},"publishConfig":{"access":"public"},"gitHead":"d0f921476509811c1109c8805b0eaf1e5cbb3218","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.f6260d06.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-tp6f5AMsLeK4vfrVNewGCoD+rFl++F9pEdpfbv5L/ALdU7pYJ3yW0BjeEl1BiFxwbVT22zEKchAa6/pIBC28Gw==","shasum":"1c277b5dc37ff323fac8b26195cf0a5ceacb8f19","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.f6260d06.0.tgz","fileCount":23,"unpackedSize":112678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNoRCRA9TVsSAnZWagAA+ZwP/AxVp0C1KMW+wZr4nlpr\nYP0RHLLXgs3JMwAhT/owWrJlw3mFOJha+otmM+W80g7HM0MlAcAQzpCK1P+9\nO9oq6qFDjHwgg7zo7lWrr8FjQ2JfwUI5wKELzddnEneoTrmAxqTv3XsKtWE7\nnCDWOqmRg81JjSOiKFDRJOyaKvOZEKp4bQHAHloloFXEHbH4eRzpeVDuHQ3K\nWkl39pX/TvVXXw+xgaoOS36l1ZF3BReTDKHZZOd5pEwli7qKh7pc7HDijMa6\ndqDzUqEZ+18MEmUVCar5BWzSKpUKDT9gQi4jao538wO4T0OQ2zfGcampD4wh\nRPlU4mTenFKeg3t+lm1WJ/wOZlA72gp9tcwkc9v4g1xe3EHbrJCHPParMqrf\nqKdNNO+6slk3FrwKMxeHS8pkUFky1MDOZ0IiRLdUPSWTr+FJbwzmkmOM8K1z\nI70iMc53rXMMkXJWXzWJ8On5uxn5QpXiqdGvxRW7atWKiv+junK89/yC8Ra8\ntO3e/gn82g3wt6a8vK0Xo4LIiYo3jIuEuDvK8U2Npl08jegk3EMi0SLHLPOi\nCnpT0eVf6R69g+CVaKjGT7HqKpdwrjvQkJgTmxylpReauQPxWtiqBqf3jtGS\n+yr+UYmFDM9asEcmsOvj9c+vMY3xxgDKtOl1i3wk/B1qDS7EMmt5OcStA+PG\nqnou\r\n=TSKR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYC/4NRvU4I94BuEcPiL4mNBJgwcAXl8ct4/4ROG6C7QIhANR2zxaWXXLYRXS3rg9D0ItUau/Vyo1e4jYvxRDLAZPG"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.f6260d06.0_1602542097518_0.44320105666271137"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2d1b08aa.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.2d1b08aa.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.8a39352c8.0","@material/menu-surface":"=8.0.0-canary.8a39352c8.0","@material/mwc-base":"0.20.0-canary.2d1b08aa.0","@material/mwc-list":"0.20.0-canary.2d1b08aa.0","@material/shape":"=8.0.0-canary.8a39352c8.0","@material/theme":"=8.0.0-canary.8a39352c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.8a39352c8.0"},"publishConfig":{"access":"public"},"gitHead":"ecded3a50181254f2caf9e2d7049466e24129104","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.2d1b08aa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-fs69Aea+OdeXrWgQRxf0h5FvjpXeSckrvO0p6kR/2A/S1dFOS0h09vdS47BdJ/+wNCGK1Lc5BZwCPfSOHCDIhQ==","shasum":"81f985f3e7e389a56fd7c25182cd5b58e2268425","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.2d1b08aa.0.tgz","fileCount":23,"unpackedSize":112678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhf6QCRA9TVsSAnZWagAAH30P/AxBEKWudSawPJXAxMll\nazlIYRGfRUylTaPOQxkLJo39WY+j/Z1Cl59NURkVbb6+C9BnfLlxzI+p32n5\ntq2FxdUj6GR/YAknz2pZSrHYBBomv9AKZ8YI+E1cDEjNru4t2hKpRyypom5d\nsbRHVruYnoB2zp7DkIhz/W+FNZpZGQ0JZLnMs16VcVEQOciSIl0MnnUR7+Mh\nGmA+BnxwiK/KlDKlkC4LKczarurhnrLqet44EIw3a7Nx7FffN+q40sKlnMPX\n1oRUrEL4SZF0Zzp6HxGy2c5ZaXXOe8S4ra6V7fuAdksdXc4+DdfDTwy51jhr\nGtbod4i6VwST5zZMk0rIKz4UJVbtkRfIb8K/T25dd7HxNMjmvAabW2fSpIOR\neajlkoD9j0AGg2tlz06dXN3G+DRry81l+TPnbOa/9uKNcUndtoSDX/Dg83Q+\nF0gDpNVf9bEHYvV01mbDesZ+3f9Ush8Tw2OfYN7iowSt8KzP1GUB31oul6hw\nJ4ahfpFtJe0F5sZO6vOvXz39SpGStDuRi19ku62vdSUW0Rf2hX6z3hk4BRoa\n+XaYRUPgNkuEa4umQVZ33YAd9XhLYgA7oYo1l5kYXrv9jJ7ofulBtLFEOnZM\ngPs3PsCeOc3QIy+aIiH4cc7U+3fZw16+T1bjPskfMB0+jVirlWrEm1+8VZ7Z\naRWa\r\n=CQ+o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAlfTuo0hsVjez4jsw1iB5qAOSvf0IKIOkqvfuF8naB5AiBzWlHbfrnQOOwhA9pqiMxVX/erAUoGWoeNl/85VCV4gA=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.2d1b08aa.0_1602616976023_0.9142651604369072"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5bd58844.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.5bd58844.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.790ca85fd.0","@material/menu-surface":"=8.0.0-canary.790ca85fd.0","@material/mwc-base":"0.20.0-canary.5bd58844.0","@material/mwc-list":"0.20.0-canary.5bd58844.0","@material/shape":"=8.0.0-canary.790ca85fd.0","@material/theme":"=8.0.0-canary.790ca85fd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.790ca85fd.0"},"publishConfig":{"access":"public"},"gitHead":"f577a3de2e8463259c7e4a5834fb1873a4bced9c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.5bd58844.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-GdnoOKmSBn3bYY176Zy+TqtrILtkNgpwewTXTYePPcjlvVExhWAKCEqhHbMPuNL7mQWfu1Lj2Lr9X+TGq/lrDw==","shasum":"b2c4d60f7c531e2a39df3f8c11070ae3eb41dac0","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.5bd58844.0.tgz","fileCount":23,"unpackedSize":112678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhjx0CRA9TVsSAnZWagAAC0oQAJmqdqHfAO9jkoIYDTOe\n7X59rmfLX10vVDEf+Rd78h7IdOk9Bc2N8Ww/N4XcqKRQ3FFjuC/mZT8QHYNN\nXIhMeYq34lkmLODZluYpKyLftcUNfI/njYS0cgcXrwEvw7YQfDI/Fomf4YZ4\nUZLbExeIS1Mw7zUAhu8oSW68KzY7Mbs9QkAM7cv/r9vjszC4YH0VDtlAKA1k\nzqQ2mU6h6NzSBPfbhOhXVlBqD08EvCuw8Cj7p1nYDQ2G3Agwu/IrjiwUg15p\n6A5oydgWC1fHhAAAH7oFrolX+S6ISC3Pg+J8Mki8+yiocRCHLo1ugM5vJJbN\naGghva16EIOGm2zin8jTNOW2P+7Jkrb6rhrdhqtT6/Faan8BlBpT0vf1hxsp\n6MwhL2fuO8pPdVqor/ZATKl1WSw+nWUsDzbKKYlPtqimEPBI/KHui8xT0wA/\nXFSdBfv4XcRHHrRk9AyIpBADnLKJo7r5rAjgU6l/qgejl9QabGXgwAbdxtKx\nQ0f9guVg1eCpeAB9mUhecfWDGsmG+iDIEnVFAQthf/PYyzP1ABIRxKqVjxVQ\nmsejHqG43iAhi0B97zNC1SHMaJxT5d1Kzwth9JrjqSJc6lsx8EdKAUW+Ps0X\n3EiXnYrDozEsgc2DxQlZEdp/Lwe8eofoAInWK9/1V8V/EShfFVQH8xHMEmZ9\ntk4D\r\n=k3YN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/vAOdXVJ5E1roODpZ4ItfojX2D8mssWdrli21H6bJrAIgeMieqfSPJGaJMPNV9N687EJoM84cbfxdnlyk4bEvLxs="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.5bd58844.0_1602632820507_0.034395922642243004"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bc846b29.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.bc846b29.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.c71ebfa02.0","@material/menu-surface":"=8.0.0-canary.c71ebfa02.0","@material/mwc-base":"0.20.0-canary.bc846b29.0","@material/mwc-list":"0.20.0-canary.bc846b29.0","@material/shape":"=8.0.0-canary.c71ebfa02.0","@material/theme":"=8.0.0-canary.c71ebfa02.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"gitHead":"08ef67ebd3aef2e1a1cfc139021dd528a4275f6c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.bc846b29.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-WRA9Sk5us6Sz90ugE6dubnvTApXTO1qzXSbzBWsklQGmwTLXlRCRM7kKkGIkFvOeUa2Ax2Uo5JNX/clx/uhOaA==","shasum":"39d3e0fea633b63549bcae6615a9cfb0c9fd92c9","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.bc846b29.0.tgz","fileCount":23,"unpackedSize":112678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfh0CDCRA9TVsSAnZWagAA7oUP/jpgBbo2pXyuPGclhuTT\nWXsEH9pAqUzWzPF0F1a8ZxMygnPT4gmAVppU5VaYydS3GY6J/tt1fg7RS3KK\nwKbOcj4gaNAcTSLPTMW3p2MWblc0/XYBDvckoADf2ehttfjJ4IZGIXCRWYzZ\nIF0lCQeVREVFkmhFPQbjiHJOKOkfBJFzEOHPYXdUsf4qiyD+hyAN53P5xb7L\nPopcNFV0jrILl36Zren6QM8aRqMgQL2ZHuA7Q63yo2IpOfJnT6ZpUKreiEu0\nIUjzHJj3jQLK/I1WIdppdKMwaccRY4Tt7t6rK7269ckSCZadaRZdHdfR3CvF\nVGAVoy1iTYtJ9tepRL+O6Fd3NAw+HrBf3icSW5NF/Tq30I92TXM8OiaL/VZt\ng19ImhsYnZdo7Ca2PQ9jLwxJN8b8C5+RPpleME3bJOGXstyNBBAuIqG2S1m9\nc1Jn/beinxrPApFlADn5GDFktgggATa5UvweRVEDTx9QV5kMrkKLGvsOvI7u\nDxuhfAf1zSzaoQz0Lwl8a/5FLxdgv/JAFRpUXcErTY037aRRyAosOBN72pUx\nzGQRTD2ODSXRZDlumQLRncgkmG52s6xPiMcAjS4mkXsGYluFwymAWXM6badv\naUFGsaj1mPYFM9tKRzX4gzX31K5K/FJKL9y4avheSgmgpKY8S4DYQKhE1SQc\nL19U\r\n=stmX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCOkUBPDkVuo0WCV+kHwoknUQxW0TknZL0b3Vum06e/lQIhAJaLA1lDkesPVhrWXTY2VLg1QRgPov3DVlrLAn6l/69F"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.bc846b29.0_1602699395318_0.4754295475781751"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3280b686.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.3280b686.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.c71ebfa02.0","@material/menu-surface":"=8.0.0-canary.c71ebfa02.0","@material/mwc-base":"0.20.0-canary.3280b686.0","@material/mwc-list":"0.20.0-canary.3280b686.0","@material/shape":"=8.0.0-canary.c71ebfa02.0","@material/theme":"=8.0.0-canary.c71ebfa02.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"gitHead":"b97a59c2fac8d04478f24f297f15106622007735","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.3280b686.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-QTvwIlZX/mzXMUaFPCee7GMuGyZA1nkqsaWcYNxQArujY3IS4zJBkwKpPc5US5qrE8kUu5ShpLrKmxM3luaTaw==","shasum":"866993b4a8a6a3ec6b716332d1aaded7549ce3c6","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.3280b686.0.tgz","fileCount":23,"unpackedSize":112678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiOO1CRA9TVsSAnZWagAABfwP/0JUGec/aDD0LgIqvBX7\nN+aL5rFquNu+ppDLXmL8Pw7MGAQXG6446bP/Ak7ktBR0KcdFnuIIIWzJko3/\nvpx9vO43ek88uW6gNKvBir7a0z8oD/yXnDdWvKCIaNjPAHa5d0AbRCBRXpk1\nzsAvVWkRzo34txhHZ8y//8dU/N2nuWloU85hV/8r3SGzei74yPd5tmNMN1O0\ny5uG2OkdRqyAKN/ui3dlqOvhFzJD6byJaVU9o/Aa+R8tfbruvjMOd/uZANeC\nBJ0BHXoski01QJdY2HANNBgjFIhp7Pex72a2jLjnvPCR8fqT35nJq6zlrxAK\nzVIm4ntlqUBnhjwUJ/NzsrAU4I6na09i03f881DYfVT12wCU8WkSa3QEirJy\nsNe5piEkUBzOm74X6UFiN5CJ8B1YAr8BeBEUz+/rSLu42K/AmjRl48PPr2Dl\n6G7TPiI49DcuvhqrhWSk7ANgBoFWQ6y+xDoaPGblCi84D6jOsDpKoFOPkfVl\nDyHCpQxwE2X54QiCRWyUW8u/nw4mBHsq0zTCy4impihV7HQ6YLOCT9P4oGhP\nM3pUkR8nITUCHOgDjzHv2MMVMqzIKYk7xsuTLZ9janTkcizOustol9iZjjVR\nB3J5GpK6fDL4h9x0ftYx6phoKha9/cH95/mgCXa2SyGUrzATCJDQETpYJZwg\nq4Mu\r\n=RqSl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmDNiSMCBoookAEjR5+tRshHYCFi1RXR1n+b0Mt7Zo/wIgasM0XyNbb9GvXDuLy5eTPdff16c+4xqrPoGILeqv2nI="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.3280b686.0_1602806708731_0.7653385299099904"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9e94cd38.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.9e94cd38.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.c71ebfa02.0","@material/menu-surface":"=8.0.0-canary.c71ebfa02.0","@material/mwc-base":"0.20.0-canary.9e94cd38.0","@material/mwc-list":"0.20.0-canary.9e94cd38.0","@material/shape":"=8.0.0-canary.c71ebfa02.0","@material/theme":"=8.0.0-canary.c71ebfa02.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"gitHead":"805fad1d9b182d084e682ab7e59a4e45d40872a2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.9e94cd38.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-QcRULkytpi7T4/WDSfYLeCY7kuDyCT+5R5qE9LryUZKK2wpcuuDtO5QS1rqnzJOQIzx/S9x5LwrO2VVx5+qjOg==","shasum":"5234609abfda7d2cd3ac0d402ad684a15b251e39","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.9e94cd38.0.tgz","fileCount":23,"unpackedSize":112678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfig1fCRA9TVsSAnZWagAAgnMQAJXErb1QGoctTjOwQtqO\nSzy5+YNOp16SdGkMkQMIniWMhxuv7bh9TLCxwmTk2ACcbwr1u613aEdKgl3+\np7d9R8eW9H6VnW98TjhSnIvk4g7v0A3FrmyMkCgEehJyzaO2d2ZmMh3C24tZ\nnwaMyXYadviDdZQq0zrBLdOs65RFl4B0bgWnc+RMdptzp3d1xa65f8BnaTDR\nEQuKfkC9l30sDylNy9DURpIqLahFXQEj2OiBni+VktffAa7yOQEHJUUroVjT\n8gYFKMmfq7ckd/3wWuUI1lY+VdNv2Ke61HyMmCRyZzuk/kBCI5afKnqzT61s\nBAMAPnWCEJfalCOhLgKYy53iWs49nNvQEGMj1GXddYvpte8k1Xqou2hlEDt4\n+2JCWrSXjLAtNyMsMCTSSAu4ct5zA2rVLLz1MIjP1xwnvD5tiahLEzxlBzEy\nSwpSJovTKDqbd30VsnJJ8UjM14Uag7DcxIXdF0S7TmY8qofaFP/81YZf3JKA\nYsFVKEQQKYRxyGXcCmpnesH0eOEQGOsNqEDGpdFMIQUNTvzSYC3tRcf+ktC/\nGNw5L7QUdY6PTXArUl9A+UrmOt6V5Eiqunyh0MqPvdFn3Hw3amrKOfK1aG91\n+kn9ISW3u4DrG1cFZ15bFSJC+aKQKmef0opPugsgysFjnoCZCGuViX4aiiO6\nSBFF\r\n=QZJP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwBy6Zf+Ws7VcTuEmvae7D7QgV4hW26M1eFPcULNUOSQIhAPIWqsFY+uftJ7uDwcqGehnZ4/9jjnXgc43jZ18Gw3ct"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.9e94cd38.0_1602882911022_0.6657023188591997"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4773c773.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.4773c773.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.2ab716cbd.0","@material/menu-surface":"=8.0.0-canary.2ab716cbd.0","@material/mwc-base":"0.20.0-canary.4773c773.0","@material/mwc-list":"0.20.0-canary.4773c773.0","@material/shape":"=8.0.0-canary.2ab716cbd.0","@material/theme":"=8.0.0-canary.2ab716cbd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.2ab716cbd.0"},"publishConfig":{"access":"public"},"gitHead":"fbc8b44864ae10f0bb46e568b25bf4de49eab777","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.4773c773.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-X8YqbhPdJTA7SWKNYWJKWtY1VuXaUEKd6HMXxRDDmGROcKhN0G46pknw9MY5DKF++SqwDsky5UW3PyZZieYVcQ==","shasum":"547c0bfdc2005eec69b0b6d384b132bf075bde7f","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.4773c773.0.tgz","fileCount":23,"unpackedSize":112678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiiANCRA9TVsSAnZWagAA7h8P/2tYHVQJCLQGb+8i30UL\nNCqiH2j7e/CecrRpWLLaG36bEq7Fbh9vKNcov96tgcscENEvO6zWYjioQF4B\nQQSowmzKvbyt+oyPzrprRpG40W24+emzAWrzIPz993Fd9IRUhl1f39Mk1LFY\nBqfgaae5A1Ic7pI+0PFYEnl3YuGZezJxF4u2c+cLoKbDILJb+Xu96BGHKHsc\n/GKN3NJG1TM8Mawjr27p9ouApNnW9opEczdGe4JR13/TfX09Y8o1p86lbg25\n93TT384Vd9zvJYULR4FAOUayoQudXTtoZmY/ouo/qxL/oHBpdf8YK9BHk08o\nRrlJP7xxx+6LJbjeZQyZSS4e4mNRwXE85qtL2m645OsX4dVuk7CDz8dAVUTZ\nrcy2yOPlEClycI0NYdcqu/hPxRIR2dAvglGqDZJjSngg7A4Wk+Dh+gK+oOMu\nlpvtNXp4zc/A6coaAriMMERJrj0h4ZsXYI+CqgTfbrWUvBLX8pRT7lBiektZ\nweNplYlZnN8+UDPq0tIm5ZBgeG4CTqYn7tx5dpdrSnJx0gsIkXSvk1O9UZxz\nXLf6UcqPByzIlTWN2gi1eSuf7eozWDv715trsucol3Kclny57ZjmM4LzrAwi\nGHnjrNtng5Ll2JP2F3OCzSzwksAV+T6YB0l27YUR5HaVbbeyl+9cDfd1DUGj\nT7iR\r\n=a+Vg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7H716UCh5jScItQJF85r8DOj4aILcYipN8Uyne/R6egIgboZrbMtEIVOjaJpVrNUbIs7aWlLh0HqL36eSZkWVht0="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.4773c773.0_1602887692630_0.39317311104194985"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.65787913.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.65787913.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.43c1c5e2f.0","@material/menu-surface":"=8.0.0-canary.43c1c5e2f.0","@material/mwc-base":"0.20.0-canary.65787913.0","@material/mwc-list":"0.20.0-canary.65787913.0","@material/shape":"=8.0.0-canary.43c1c5e2f.0","@material/theme":"=8.0.0-canary.43c1c5e2f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"gitHead":"b21d55977da5e0c291e9fcf3fb992ff4c683233c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.65787913.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-De0dRlrK4o6RmliCf4VfQFC0/j9Ax2wBainqQfDl3Kd5TvL8tGK1J9kmVCjNmhDPLjGQds1nFc2Jf0KwCFKrNA==","shasum":"14fdd0411108de134695ed26e31d40cd75bd84ed","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.65787913.0.tgz","fileCount":23,"unpackedSize":112678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjeBACRA9TVsSAnZWagAAf2kP/2oDRIBD8mGiZgThCdNS\nRqAeO8JNOGXj7yk5/fmakENdgikUHTzjf30a3aFJYop+3zQ6cLI/b/GmBhan\n2cStWx0WtMfB4v6NEbuXs8ZddKh1Sk7KGN7AZV1JjnoP2dQEISm0hwfQzrHn\nzqD/LeYBU4v5IOKS3Gztyvup5p9Syw9m3yjvU1lR7gged7rdIMdUd0IL/Y8b\n4gv0m/WxHB5FJX5FRiGqcG6Treb7FoJeyRkzN5MajTu3FPtN5NboASDoXo6k\nfby8vMbRAHQm9RMmreF+r41bT2BvuQ7pMfwrbVy0eU64waRHGU4GLn0Lioni\nVly/qVicuElsq4/d5G7Ha5OGmPZ+fJUDIQJLmFugM/w+LxfFH3z5T34dZaRN\nJWrNFd+Hx2onBS8fdm/1iWY1Q+bs0N4j3z5QIsPjo62AuFT54BItDygzTSW0\nbkLl7vxKzwVNI/W/ZMmms9Zm6DIn20XR5q36gLpPbD5jXg0O33twu8PQMLfR\nw+mdf4r5oTTo/aT0/weIy0gPDHMNX6dRSAZ7zuVeZWhMtkR8tbiIouwxw8xr\nA1gDv5aaEDZB7K6BwJ6uMTSFdjmltyZC5AHM2D2QQBfAtGw3Swl0PGyJ+Ty7\nWwiyaBZE0CgvxYKhRL4H/giGyRsIiyrQA8EyJH/hCnYn0txcoH6wBjf7F+PI\n1llp\r\n=hJJ9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCXfq7zqOvDQYJD74mpCkvBAuhdSdT0ZpMRwCRWtQQKJgIgV7K+ojyvUQ1xf4jaYIN7Y7OwGOBsIuKj53YR+x0a1JA="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.65787913.0_1603133504296_0.059295882223749485"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5485fba3.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.5485fba3.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.43c1c5e2f.0","@material/menu-surface":"=8.0.0-canary.43c1c5e2f.0","@material/mwc-base":"0.20.0-canary.5485fba3.0","@material/mwc-list":"0.20.0-canary.5485fba3.0","@material/shape":"=8.0.0-canary.43c1c5e2f.0","@material/theme":"=8.0.0-canary.43c1c5e2f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"gitHead":"9648298c6a3406f312222d0c0949954cc1e250e4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.5485fba3.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-tTd1LgiAETdcE7xl0TV54ykVZ8kuX30M2U1IBuDAxHT9SXq6ARoukPoHvOCOiWAvGmu0WZhZ84fetPmzReqsAQ==","shasum":"66f834c101002e5ae580bd5f2c87d73ffc7aa6d0","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.5485fba3.0.tgz","fileCount":23,"unpackedSize":112678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjgQoCRA9TVsSAnZWagAAHjYP/27r+pnrmDlB2kgNNEE4\ntd9SOh3mzZezAVGyGa3aSAO3vPo8wWCozXDocxlt4ZBP/yQSqabFQdEygfFH\nGsy8fGyn5ZZ1OseyPzb7oRSO8jf+kjqjB1NipEVdhI0069uVwjwAlMSlsepm\nSrrORYEBQBTlxSLuK0L6lRhEQ7O3VTTze4gCc8ksL+aboZvu3bXfDXUzrKbL\nK2tRddI0bQigph6dDto72ehrHaZAqHUWXZJkuYlKh8Qya2Zv1kFe2wwl/bbF\nimkzQaRdTIEapfdHVQH3hHu32a//r0dsUC+eleWowE3WOcbkaizi0iQtKAvi\nRZg50eL3ETKGOQSzwIgbgh+1k0IFvg6wnesVOZVWZcJGoVrvPJCLtcvz5cCF\nHdSlBxPfjeuVO7fivkNE1+pLUc9DWnkZZFu1S+lKz6MFLloVJvDAClE6Elv1\nXjPCGX1vQl1QTpDzB2IBZdaUYxV6NQnEO/rXkW+AtUcz2asufEniWY8lYeJ0\ndhXJm9eh60VdNZJUt566aQyQUqxg9i2wwL+xyrimAgTnlNNJMCW6iJWuCXm8\nhZ/rTyZWKQZX9itsqvnFFfC6EfABQ37aqmFfGySykD1BKWPgwbbjkjEfSdsb\nZNXfxoR1r5rH1BnAmV6P0WjAOXaGvgBJmXdMZ98eR4Uq9CneQN4lKAHgS+Hr\n6lZA\r\n=KcBq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFERSvhu85YuDnmODPlXc3bbneSNWOVAGJOpGjCI/xp5AiAuBoMuEZfYK3oTlKbMXNzxRTgkz+xhbv5TBx+VTYABOw=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.5485fba3.0_1603142695555_0.33116518678434326"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a39d0a92.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.a39d0a92.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.43c1c5e2f.0","@material/menu-surface":"=8.0.0-canary.43c1c5e2f.0","@material/mwc-base":"0.20.0-canary.a39d0a92.0","@material/mwc-list":"0.20.0-canary.a39d0a92.0","@material/shape":"=8.0.0-canary.43c1c5e2f.0","@material/theme":"=8.0.0-canary.43c1c5e2f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"gitHead":"c523e6fd9acdd92ef501444da567a8910ed478e7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.a39d0a92.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-LkDf3zXf0VoVOQuUKSyzs6aUPrAxsWC3kWJ4bwe4kXN+lyNjAffm5sqGLuX4X90Pd1WELrYb6hBS/b0Ey9SVXQ==","shasum":"396094f2cbe1385ee5d20fd7f8a4fcb1bc77f9ed","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.a39d0a92.0.tgz","fileCount":23,"unpackedSize":112678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfk0oQCRA9TVsSAnZWagAAqYYP/3urIyrPDM/YjxmsDjIk\nv20xy56Gy3D3wevGDqW5y4iuCFg85qYacRGU2Xf1ZVQD9K9I6SCBPbB3kajw\nJm5nJlDDfildTa2np1mMIKk3XpQjXmDScsAqfYuR+MX/vUwTGrHr+GjffToD\nxZvWoloX83n7OjzBHdFZtRS8Rhn460KTuLNBpsXuzECJqlpBXgW6pRQZGWMF\nS0BZzMvC6bWCc7CW31zeeIRIgE3OK4KPeg7/Gro/bZqVH6gNBPEAmlIf3rnr\nbJgFhtoibxvy+oMvU92ClyuQT82093cy9o0t4cCXR/HZ5zYJ60pBgiobQP1u\n9lB7CJkYmr+b8edFUQIfCFBfUX3VucPAvuNlc36nJ9ARfMaxDXaqVRQrUvT2\nGc/JVdnGKPgQ9eZNxou8vaYaMUmwji8GelYZnYtvLE7jav1lU6JsIo8y8kF0\nXJfuhbAYfnrB6N6nsoOojSVsPRqmN9TtoM8DkVh7r6ZJMh8F7wFkNugGUiGl\nWzHnre94qnhdLlmbF/jNptSnXj5rHPC1h1+2vz2+EJUTPkcJ7s7rXR4r8PRz\nvz/lug/qSx5bwPn1d4oITwc25hzVzxawxHseKrLdOC+8P7nGgptwSK/ADm5B\nEfrjaIN5on4Gxe1xYXpy2exoVtHMJxPc386CyWyx4gMN61Q5nQwaQLEUOMGc\n68BT\r\n=+Xq4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHq933viPARw7olDl2vfdJAXo3aZACjervoN6sR2dMW5AiEAucRNJ8+9UAw0An/YjnrCR+PP2X28NYv9PS7SNubCL/M="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.a39d0a92.0_1603488271773_0.8256079533337064"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4eafcbc1.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.4eafcbc1.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.ccc64eea3.0","@material/menu-surface":"=8.0.0-canary.ccc64eea3.0","@material/mwc-base":"0.20.0-canary.4eafcbc1.0","@material/mwc-list":"0.20.0-canary.4eafcbc1.0","@material/shape":"=8.0.0-canary.ccc64eea3.0","@material/theme":"=8.0.0-canary.ccc64eea3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.ccc64eea3.0"},"publishConfig":{"access":"public"},"gitHead":"d5be869d7cb28aaf425a4fae37a4f61d918dc1d4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.4eafcbc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-+dIDlPtAWNk0gRpQ9zZW7hWXewrwAUhiFtjDDryh1B+t9j3TjKm11fhn/97VGwTmbw2mqTDbealBaNoDuElfRw==","shasum":"5179946d8d71f16c45bbeefe544251f52cfee4be","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.4eafcbc1.0.tgz","fileCount":23,"unpackedSize":112678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl3YmCRA9TVsSAnZWagAAXvAP/Ag1crWRa36uPQ0baygP\nQROKQVJnOcPwBW554sQjwe3A9KqCt+4DagaHCTlaS+/RCzrL8KkZCdNHc3s+\nFIJh5FVL7QDCwTgP/KZpN31s8ntseCKEKVuRP0fAedelVl/SuUvvELepp98K\nhv4PwFMDfIyjZ12QeWCZ/xk0GHY7GJdsNImSyWQZlqd77mXTaiAj+vsk4CAY\nO+QxLJk4jRSg5Q1H9dWjB4gAp/6A/gODGdQ8G77cmqrLjO/F2R+tUYKdrfcJ\nHjwdA1bpvHK3UrJw8Affdo2mIvDXwQfkdmxrvVdN5my4A8zUlZuUdW2qfg4g\nDP6zi1BgbTWCr23R88FPqP++s/h70dKEAgzBaeuZEBA40VBxkTZX4JpXL5rC\nHUcecV9y2XKy3wj8S1U1eIzMS+Bzczp57ywGSEMkVSCdY6cQY/niHZZaHV0w\nPFlQMnCq97mO5kPMXozwfbkuqLo7H2fAcuggInAb++G/AdCXRJZymIwsQMFs\nBE/RvznZvC06Zdd8VBEL00yXdEPhyxzdomH85+Q8LTpcYQXjhkDh2M7kFBxC\nNv/rrKXDP7CjxlhnkwoOr2Zsycw5zfJMG9yHP3VMVihNeeauhZQvnASviZ6M\nF8EVkn9iGMl3sQm4B3fpps+jlQDPM+11ryvEjiZG+OUDmZObehDbdNzZESXV\n+xSz\r\n=ntKB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICGyDswhS2B62iEJYG03SHYX4Mvo1iykBf/EJdGEbsvYAiEAi2g0i6wC3CG6V2uCow7YCyYw+J3XypuxV8/YeNmMWqI="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.4eafcbc1.0_1603761702119_0.9773408548128069"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.32961593.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.32961593.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.a79cdd019.0","@material/menu-surface":"=8.0.0-canary.a79cdd019.0","@material/mwc-base":"0.20.0-canary.32961593.0","@material/mwc-list":"0.20.0-canary.32961593.0","@material/shape":"=8.0.0-canary.a79cdd019.0","@material/theme":"=8.0.0-canary.a79cdd019.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.a79cdd019.0"},"publishConfig":{"access":"public"},"gitHead":"af0d60d5c2174ff8ae5098ea73212398be59bc74","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.32961593.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-mfUL0tVFRxdEx/fGghQql1uPU+FSBOUVVyK3vMkM4qoABITVZt0laUYz5Ucnl+bpg8fOL2eX1THs5trXCvluBw==","shasum":"8a038fda857a6c3442afdb0033bae465915ed35d","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.32961593.0.tgz","fileCount":23,"unpackedSize":112678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmL3ZCRA9TVsSAnZWagAAzOIQAKPZe0oUTDchafKaiuJx\ns+295mJhLdFAbdEx+YGFmhO6CGXa89Pagsj86q9QaK0QvNWgaAwqUJaGYTyt\nsI3hZyS4LRc6w7UrXJE5r4cseVKbxq2KhX/K5D+HsuIr96mjVYEdoxm/5hR4\n2wMitMk+3fMX5wtyHQBWX56IVKyNQ6qC5tIysoXIXdP9EeYsyYTMncWlfg94\nBPWkkb6x1G2BeUvnF19zoxbmlcXlekEhbJ+1/7wJp7tP2nScmuQhTwnsFybm\nEyaev11jRH5QvvnWKtuO5LfUV9rNtXSkyYnnYWwDzbNsUdmS8nIxLl/PNf6C\n3UxWHA0NeUKNiV8t5w6XS6b//QWhSezfTqRpMbC/vXwaRgvtMqPFYxrSUr2i\nosxMgdZwWGHuO4U0HLqLbNJYqWT1gHoVd/PMfgRQlepTXw71uBaCIxKtmMBM\n7TUYH58Tpv6lOFikFs6ud5p1H7+RWvcd+kv9qBk+TmY3UXXsFfophnUVczCO\n38eOfGHHFu4UQ7EB1AODyeetw+irlWlBTMBI9o0YABBjRuBUJ781FwdweCOU\n6Dn/13guQFiNjyuuNMPcj0CH04HNWxZLePTJAd27Jr8PowQw7F4naLW6mmX2\njEMF1c8ms9y4wYzPCCji+zpg8/jYMnV4YeKTJ04HVNFetZn2yaYenS9mPTzW\nb09B\r\n=dcsI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBRrHcJr31ynQw7Qgh8hBJmWd2IHzLRJAHTeaE918CWsAiEArm+Sa4E6gf36iwVKpcECwjlOSRl3I9Dzio4NLYsUzvM="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.32961593.0_1603845593136_0.48014734773009193"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8e3a0601.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.8e3a0601.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.a79cdd019.0","@material/menu-surface":"=8.0.0-canary.a79cdd019.0","@material/mwc-base":"0.20.0-canary.8e3a0601.0","@material/mwc-list":"0.20.0-canary.8e3a0601.0","@material/shape":"=8.0.0-canary.a79cdd019.0","@material/theme":"=8.0.0-canary.a79cdd019.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.a79cdd019.0"},"publishConfig":{"access":"public"},"gitHead":"a21493f177ef3992fcd667ec3ce774d4fc926d7a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.8e3a0601.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Se3b9JJv5o42mvH/QGBu53DwB0gMdRbmLP0Cow2eix6okb7Wptzdq/F8S+xRIypmvS8ANO8HPmhf4OLBHy1ufw==","shasum":"a4c413bba02afdb4d4265acdff883535d15d694a","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.8e3a0601.0.tgz","fileCount":23,"unpackedSize":112678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzYrCRA9TVsSAnZWagAAWd8P/jqvOKqbYtBTgfPufbkm\nLg81QSIUYff3LGDKef2JqHjzA4GQqeqOTUQifBDi1ewOwfDlIR0A0BXvGwyl\n+5QfPcv88vhQMRgz35uCVKgVPqs5aliBiio99qthBi7dytT802ClJanHx9fv\nLdwrHPCWsxuCGs2gw3d4bzCMNUY/Mw0jr30nxZ+xKmVfPm0il/b/lBklnnmS\nUA0xmugDGwWHyUEQGTsdP2HJFqLrwVZvzR8fHGgjtVH4j/COb1UU7+sxnhJU\niSgpFQMtRio3NBNUoH1jR3ljqLb/moagQqIzWMtLc0di3lWr+QLIP1xEseaX\njCDk2TN+KP09Me0CFaFM0w6ljGg6kONIkGJgfI0PkFC4731P/NyMoluKVuMA\njFx7Rjdhm+wZxmPbhTB+7Z1PoV3a/H+NoFtthSLxP4Xo0P38JfTch9JPLoxU\nv0vwm8ePG4UBNVV73j30c+KFUdM8LKK5q2XFsWqMCQo2U3FFYjvvdoCbiFOv\n4jxAFYaLUZwWpUxr5GMrKVWH8zGQWuwjKlOk/mp4+TJ4GS7qXsFlQjypb6Um\nIjhNexaxITk0WfOhGgr+NKcs4Fts83jz/hT15iADYFHQ+dIc7MX0LXzTttlc\nfYud8+4B0YM6Mc1QRG1AxHrx1bsgVjgfI3gIyQ9jF4MSEdoOi20aPGL3gSmE\n6ILM\r\n=eFBt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBJhZAmBFHc2PyEGZgUfKF1WYV6AxbuUN1UDdt3JWxjtAiAR2BY+LzewrYoaQXnHpfsDUz0mmyLzK5BtNuj0Uj9FEA=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.8e3a0601.0_1604007466868_0.313468090552836"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.178c25b4.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.178c25b4.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.6d9648ab2.0","@material/menu-surface":"=8.0.0-canary.6d9648ab2.0","@material/mwc-base":"0.20.0-canary.178c25b4.0","@material/mwc-list":"0.20.0-canary.178c25b4.0","@material/shape":"=8.0.0-canary.6d9648ab2.0","@material/theme":"=8.0.0-canary.6d9648ab2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.6d9648ab2.0"},"publishConfig":{"access":"public"},"gitHead":"80850b707414fb51c8072422d293bc7fea8a6d8d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.178c25b4.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-hZTunk+S/wJ8npiv3pTk0yIXWFkR9Awptt7uHYkhdGEDedgP45osiQWME1n204bovdYLxq/ggibpEOnHwzYqyg==","shasum":"08651393b405be2b114fed196834f9a18e9182c4","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.178c25b4.0.tgz","fileCount":23,"unpackedSize":112678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzlVCRA9TVsSAnZWagAAwIsQAJCMb6uQwJVrD1CBDr+C\nRg3o0iUA3oL5mADqEYkrcFkKOF1rwB5HGCQ+naOXDWnOPKVJqz66DeX5DWr5\nbh1EXBuGcIsLLNHfZvIJoN/u65reetLzj0fehsYjbNMotfcDCrl2cUaOmqog\nuFkdxy+0vCejA1QAxt1AU8UTesCjQxvcTA8N/7EVyI79UKcX5iuaxOzLypVb\nwl0uwjNcf2dprcD/cpr3ftlkd/edhjiwxI8AyHs+MpMh7aoXf1pHFNs5JApV\nOH7ExL1bQhmYfuY28hCbU/VbHxF7af4xQgjaVLythbtsS8B0xf8VUTSCZnXW\n1Hor5f5zu4qA/F5Lk39/GyfC7GuRUzdlY3IUq5lbGpoSXU6RBpUKvAh+BzvL\nXsUFFc/4xmhV9uNO0A+g3axh9PMebE+xN57s/vsa3OSnr4RQ2AQRqeKZg0sv\nw4YquZqSV8wFaFZvM548bDOyll1JdH9k0VNq3RHlQdqfDd6ftBagXtR3VIVP\neqrcLfuWH4Th9AP6weIEgQjOyWxJrnINZiX0SV+d7CXWnDsKB+KkRRc0KXsR\nThZ+X5E0oH4rmtM6vCudAHReSdmaxX6U5xmTH0H6k8qFRIpyNbWN3SvMOCJV\nwY2sT+5C1VYvDsfobrZ2VzeMRP9+/SylsFcKS6D7w0RspTh8Lb1OQyM2v8G3\nfYbU\r\n=vzR9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEN8Wm7cPTnUhCMTQJCtgAy4oI7u5zpzOdcGC7KrK1tAIhAN1Oq9M0MqrfQ+L+8sHSldayJlFYwNGSfFkc3V/GDVny"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.178c25b4.0_1604008276821_0.5373210655982519"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.124beb49.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.124beb49.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=8.0.0-canary.6d9648ab2.0","@material/menu-surface":"=8.0.0-canary.6d9648ab2.0","@material/mwc-base":"0.20.0-canary.124beb49.0","@material/mwc-list":"0.20.0-canary.124beb49.0","@material/shape":"=8.0.0-canary.6d9648ab2.0","@material/theme":"=8.0.0-canary.6d9648ab2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=8.0.0-canary.6d9648ab2.0"},"publishConfig":{"access":"public"},"gitHead":"8d314226afe84cba75086ef952556fa1fc0c5de7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.124beb49.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-gwP5dCtyVqrzyfPpS0GRSlSZjdZbXFajUv0/lah4HhgpRu4bFXk83HUakXqEB709oJZajmRc2wrfLB466AjbFA==","shasum":"62abffe6dedd2662bf417d964ac96edf55a123d8","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.124beb49.0.tgz","fileCount":23,"unpackedSize":112755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnKqxCRA9TVsSAnZWagAAH1YP/2AmaYKxaiDXG5KirVSD\nRrzCagGOAdp2Cnmw/fxvSYPhSCELH+d2o757zgdzDFOWCWozMLzmw2l1mXyi\n1vL1gl4KGj8Gu45JgPdnQfyITv/ZW4IyeEHajjeT3pxnrFbO4faFXZxuSwzn\n4K63znT04auhg3fVGekl09N38nxRUEhRQKhj9hNa5kKX1EmgoCw26aOI2Vga\n4bl2yBUt26zEalPoCeAavItQGcC+Iq2a1eVC40MYcS3tZkOFrMUIw8QK3ySM\nuyN4NpkBLidOC48cHWIK2Uzgr26/bn3EFVPdw11scp0yfPsPrQrx9Wk8uo0Y\nHmBxXvGnk/g6RU4H/MT70Oc6G9KBMowGJQilSlNvGro4TmIg5yz1DTur7Fn9\nwDD+BBCgrE2GxiymBhe787Nw2etVuWxBLle2l2sE/umIwYZkCqvCDSToyVx9\nJcS0dfzg6GobDVevb0sxIDRbVkC4Rs/TX1c81U833BemGRb5oNeof78o/nTF\nVwCLk5dTQlheVWvc7Muvj8q5foYdalC3TDacxh/63H7bzJxfZAjne9bBj4Vd\noMSeHVi43Ilntdk20eBIIC015OgrpN7Ti/WhBluVeSV/IGRFLur0qn5QBo/H\nzmUMsPOSUNNrNfUSCoNYU4TmFE4yX5BSELzVGfH0amC1BlqbD3943eUPTGuN\ngxNu\r\n=zUAE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzE32Jt+LgHSB/wf2ReC7gOJffCQ5M2PCpae3DrAifeAIhANS5TTrkom9jCSHfSrmbLvWpWRG9dDh/33w9l1Bb9Jts"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.124beb49.0_1604102832719_0.21198394743394755"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5937f468.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.5937f468.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=9.0.0-canary.d6b5cd418.0","@material/menu-surface":"=9.0.0-canary.d6b5cd418.0","@material/mwc-base":"0.20.0-canary.5937f468.0","@material/mwc-list":"0.20.0-canary.5937f468.0","@material/shape":"=9.0.0-canary.d6b5cd418.0","@material/theme":"=9.0.0-canary.d6b5cd418.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=9.0.0-canary.d6b5cd418.0"},"publishConfig":{"access":"public"},"gitHead":"d1d2934f5269407a8c0f85d5112be5354c17a971","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.5937f468.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-nW4RCxh4p0Zah/niaURACMP45YnitamcWcG5+23xF55h7IGYf81A4x5oMHNpCFI8RGWe+mOutRWdovxMJ8vncQ==","shasum":"fb5a810775d057eef441277f8bb9f667fbd7acfc","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.5937f468.0.tgz","fileCount":23,"unpackedSize":112755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoxfcCRA9TVsSAnZWagAAxNAP/RRz0LKHd+v7MFcHeDuj\nWLttIkrqpez4kJxpWRIWpDt92P4dPrPsxzOxomXMNRfaaIKAxv7g55zg0cPP\n0qwG5CY+TQ5sani+hywtnjyq86nOqR4cPfA9CLiwHxTGD2S42KAWGr7RW64n\ng/fgTYT2PxxX1+bu6QpMWnqCtJhaOsPgosZxsecgXte9ONmo7qZ203Rrcwlk\nT1dTg+8T9yVEoCcKDK0m9C/f1fUzn+7U1K06v8eRH5P9Znx7OaRux5Jfkiep\nvaUqJ7mJeg+GgcEZ4kZfqCRb76L9bHn707VqIMF6l/P6kFP+kZ+fuy8tnZhq\nevE85DwOTCBB29kM7435AhLZa7TWnX2r1VuVOPhib1eYKgvP68l89FAxPcHc\nshYWhgTrORsesxt8zzDbX1ZLK8JPcReuXcdmI+Q68IBnHUt9TTV0fZAiXJfi\nNd0XoyKkx0Vb8juIGU/XdPhoANiY9hz11YK3np6yvPtOaQPYy/AmPII06E8a\nibfTF8FYxx6rIwEr5FrVSHmR/k49EPchUkg83x1Widxt/pibndaB01Ao8qoh\nzdFZrZYqoS8Dqhz3f9v8ISufFWGXD5h4GSiih9OHwKtIuJ4DY/ZZbjrfJY0m\ndzF7WfGiZiBRmdCONzoSPotvaPmTPNnayUTPLE3raqCDeLujcGZUFFY01Ft/\n443Z\r\n=cvqY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCaH9jb6o7yDucqpET85ZObiidvuWZQTtBApEkl4vLIzAIgTgzBraFAT02/eBrvZJ5IUxO9GVjjH8+E4AnpEJRCf4I="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.5937f468.0_1604523996494_0.31459016023049835"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a9bafaee.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.a9bafaee.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=9.0.0-canary.d6b5cd418.0","@material/menu-surface":"=9.0.0-canary.d6b5cd418.0","@material/mwc-base":"0.20.0-canary.a9bafaee.0","@material/mwc-list":"0.20.0-canary.a9bafaee.0","@material/shape":"=9.0.0-canary.d6b5cd418.0","@material/theme":"=9.0.0-canary.d6b5cd418.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=9.0.0-canary.d6b5cd418.0"},"publishConfig":{"access":"public"},"gitHead":"672dd0ebc89e93768abf9e9fb4a31fecdd7873ce","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.a9bafaee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-+89pYmlODurGTbYURqMO1n42dRovQTAwtfXsuyGdjCgpxQYwkT29mAGdi3VvtgGeOSPp34tyM90aNic2uFzHmg==","shasum":"15a30db99e4498242037c57379e26912002ab615","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.a9bafaee.0.tgz","fileCount":23,"unpackedSize":112755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpH0/CRA9TVsSAnZWagAAFlQP/3s8dOoqkJWXTZ5bmuj8\n1nrXBd7GChIIacGSu7pYLxjno2zK0ePtxfRLcnDwNOI5gDbxPlK4uPJuogx5\nMqDBtxt0Qnnm88NgDIfDlHviXl8pPyAN7ZeH1Je73NWTOu0MDheFih+bCS8J\n4ppXMhW0pHKWEIIlXbUUkNtrBVEZTzTn1oPpJKou0dDHntzFjTvNi57gsYiS\nTTIRb4t39C81Cs/nV6NyxhDV0iuA7nwBWMHnRfvHSHAsCcwVV2viUfgAZyZP\nA4zGkH04qAXccI+J4Y33sjgOIvuSHpFPn7KjoGG2lth4UMgGe4LVi86NfS9g\n4WctwxckNih6emaHIqHTzo8g+uJpDhkdhAspasabFDrXnFJbGR698PzdWGh2\nAHQS2UP6xmPzOi3YNDt9O7bLox61yxbxIl97LnOx8fH1ug8npKF2ccUwEyB9\nohvia669jOwfIDx83dsNdwcu68VZBJlFQtlZBEnb/cJm6G5ZHFrBa06JWobV\nO5z9n6POGZEYajtCmTHGbSRHaemzUyA7GnEXdSYpZf+Q6rKKFm9Vjs9poIzs\nC2xuxi18CmvH0nr/eueNgswCIj7L8RFXbjMlrZfEeMQKIiS2DV6BQpK59K1F\nB/nbPc7SWiZBKF/6CbEwqXIxOuNnZmU/E7brTcOnyou7G4+kvpTVlnThI+O6\nBrx3\r\n=f4SL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHcwjuwRHBv0B65Lxjui0Lb+lJuDnWcIpRE4CgjHJ5iRAiEAwYlQGu63DPtYGjKI87muod1JEz8UKJB/rt2015m03vk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.a9bafaee.0_1604615487122_0.8695194389935799"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.184861ee.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.184861ee.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=9.0.0-canary.b39094d14.0","@material/menu-surface":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.184861ee.0","@material/mwc-list":"0.20.0-canary.184861ee.0","@material/shape":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"292f005e510c59c9b761c4120c56e8c9854e4595","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.184861ee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-tfW1+Q3Ch6AVsW5hltbgCVRVsP/1aPurtYpzjyzGFUyyFDPoYw4kTQc/9DZTtC71uJ2SevukyNzBDlQLCPtKXg==","shasum":"fba2e2ea3b3d1c5fc44e4474a7ac1eba98372f18","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.184861ee.0.tgz","fileCount":23,"unpackedSize":112755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpex8CRA9TVsSAnZWagAAbzQP/i3sZ+iA7O5BLrKJ2T3l\n2UcWIezrBaIU2Pqk8VhQBK8EYRtchP/p2jubZzZZ7vALjXw+COuoUGT833Dc\nZJDoM89kFBQeHME9CwawRADs24mNYx1MYdZPW43FG0S/XKNsNFNZF/sLoMIN\nHjLkGu2JDtLUM1h2KzqkRhfN58AorJrFkq/peHSczo8EjRCECM2pMfCBdhmV\n/ML3Q2H/3TwWcyoazynAVKOW5OKEMR6yBaWEzu84kZzTqX180WXIr7OuzAdk\nk38A9xNe956Q9CFfsCB/J+Zn2TnedSjbvXjGCHD5Wvf9Hrp0a5YgW78xHNK8\nAmQoxoM3Z1oWZYvqHdpzApv44OFwTctkzW6JvNSxRiBCD/EKs8YBLKtPLBCo\nqhTgieooZRlEg44RhE3D3Z6+wXhYa65+q4roRB0x5euaWYdSPqaquvrhaE8+\n23MYxMFeUKCGYmkt6TMGY/as6o60MTPuGdN2omQOEtLyc4VbQaJid5RE0jf1\nW3tdzjc6JeV32fFP4/8MHu1u9lbPQLX8ngARtN/SUg+uoKKwlq/sxOlKIdA3\nWvy868dcVc3wfDAvU/RHjC0Ko85R/QWTbspnHBPL7KlYVL0gf1rPPgziz7vt\nCccInAJ0A63eAN2Soz390+bhx2ADqFbeF5MvyQ9au0KJ/rKJ9dzzAGX7aPrn\n7mL5\r\n=3g3I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+Wl+q3Ln7E+OmXPTF5AX2mwD/aUZCVDssMcGxoDD8ZgIhAKJsqeH3VYKUG+AASv/voAMnSMiXkeKT0UiTqYl2o8mg"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.184861ee.0_1604709500135_0.3794309317827653"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c6ae2d6.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.6c6ae2d6.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=9.0.0-canary.b39094d14.0","@material/menu-surface":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.6c6ae2d6.0","@material/mwc-list":"0.20.0-canary.6c6ae2d6.0","@material/shape":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"38ecce3da3f921a8c45ce342e47456c702623761","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.6c6ae2d6.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-eMuPDE7qxUhY7q5oVq7jMuhdq2aM5MkIC9AXdMRqcITldEpm3Jny2e+AFVIlcu5K++ktG98gK0wYYb71PQhL2w==","shasum":"27d0ea877e28fc13b033866183f2717b1380409e","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.6c6ae2d6.0.tgz","fileCount":23,"unpackedSize":112755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqT7bCRA9TVsSAnZWagAAiqUQAKMZbxl881ghZqxhBIpm\nk9Mje8f9s9ZEuyCh2H155nKqqi1Y3dlkj149IkkOH3Ao49BM3IM+FLuvyAEH\nmwS/GE+9e1kFcJgRhWFOyuMPqQ89bGTK3HG2Qnq/B5jfTmFN3KXK11Z3lQtT\nUHcCA+oh+Q2bWaTjb4pELBkg0t+FyH7tgbfHKV9S1JHxEjyyZWj9Cl+Xwa58\nzrzZ/6ksttstYmdmxoewm4z2v53AfLcnWopW0sgWJbxlHt4tBLupDmyUupNh\nYSaZMcfi4AubuMY/dI5OCoh43dCpSespQjJjqJfP0ciHiHqz9qct6+hkmSh3\nWs2mzwsjjDXJXSz0iApwh3Oi65Fcov2akE917iJ9gPprqLYrcOeXy0vOU7cC\nUQZysoZbVWyZp0VWSG1IkAcRl0m3xyCUX3xDZ7a6hRv+hyBq0qmbLWK0GITl\nZRDPDoDyKwcb0bvnR1qVXF+Yr3AGXnzBNPOVXN3sxzwJC99AYth+pck7cq1l\n8dW8+aO66br/p0/xCp60dQeboSz2u0ayoASYn4WtmSulL9DuA5TmuBptSLjR\n6ZQcO208V3/TZvHYBCoZJ+K6/VT9B3sh8grGKjJFPuFoS7nVQvZXdliJNVpm\nXc39/j85G37qpVNjjijKIVgI4a9gvh7t5nkZbf4X7sS7CoMAJHiSmLbhO3L3\n8sHm\r\n=KMYV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCN6aMR7aRljTu2qibfi6SXDx400Sp8k1eceNwTWLcSfwIhAPIa85ppC9EwuKV09WSqvcWwrOVei6WHRzR5BtmFW0Uu"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.6c6ae2d6.0_1604927194815_0.4911843677686585"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ea2aa477.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.ea2aa477.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=9.0.0-canary.b39094d14.0","@material/menu-surface":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.ea2aa477.0","@material/mwc-list":"0.20.0-canary.ea2aa477.0","@material/shape":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"44e884f1fa66508713a0632b0fd8052b5a88aa77","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.ea2aa477.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Qd8je4aMRjSgPaaLNhtb/RUwSzUvPrb3pBavMGD7v2fmcadFwLjhQsTRLtJWxzc9XJWOjYy+pck1tb4ACqkfng==","shasum":"4999876e3c722c4304792ebbc00d453e3ec6c294","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.ea2aa477.0.tgz","fileCount":23,"unpackedSize":112755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqde2CRA9TVsSAnZWagAA7qcP/jQf+uB5lrDqgN9WbMAz\neSHv33e+NjmWFsntPSYDjOyG53ia9je8ULS037rpwmcplEvu1d+bOsUEsjny\nMqbQrsQVS4cF7qK/B1EVJ/D8bxGyvQwdoH6s+b8rIquzPPvNUUXMxjK/bdyP\nxLMdIwJms7JU9hUwH9L6Ug/L6bjtfzkehLeAh8R7RiixrkboA4BhpBsaCdXv\n6tu+5fOoDUrQfe7Idl2WRtpc6fOewiRH0U3/e8sT2uKhvMfAEiZU2ihmaLiy\n7QiEdId3XPoymaN3Fu/SlMBwHBRD87WPuxAPHMPst5v6rwOkrzI6dVGNSsfy\nPeUHIjtQW4Ff4dmRbsQixvbXm6LA8KUZbhxb/2sJTSTub5s0Mo2/JtzAgyNl\nF1m4xNM/8kUCseR3g7F+a1iJfl8S74QSfVmHhVD3k/e9cf3SkSfKjdBiT5aD\nYw7VOtiVLiORo9jyHKGiEA/+7gH7XUF6X3YoXLFoVaDWj/60nzZMOdGdk0sR\nHcUbZK1rKwlL+Lb694WlkqKzmndJZ0HF9xEDxP5+yyjv4gO4q/aCtBlXH3bq\nK6fhDsZbA9eFOT6qKSShEEB3ofBTsuUG30OZKQgLPsZMA77Jq4tnf5RcZ2nx\nPT6I/eC9EE0WdrERQ7aAyCKwJmBK4Cx2m5x7MrOiR366R7QYTZZ+bC5J6Rnc\nRYnu\r\n=qEEs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgjfbj1M6rHxtC/uSBJX+JA5UrAFB1DeEYzJRK0FHx/wIhAPcQNl5GGLbD6IrCezmTLSw3KE4arjdBkWpOuiRqJTkr"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.ea2aa477.0_1604966325786_0.952266058253346"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a2c088dc.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.a2c088dc.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=9.0.0-canary.b39094d14.0","@material/menu-surface":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.a2c088dc.0","@material/mwc-list":"0.20.0-canary.a2c088dc.0","@material/shape":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"60aecd658763ef0aa8ea8055ed91f03f6d3697fa","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.a2c088dc.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-vpOKKGsQ1sd4QJHRxOK/k5QCFLwQvTlCan14GXyq2a//laKuywi9kA08pC6x1xCXNtjQ6u/W0Ljh2cEzDk4zgA==","shasum":"6add74df606529e644d86cf1c7ad39bf0d84f30a","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.a2c088dc.0.tgz","fileCount":23,"unpackedSize":112755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqqK7CRA9TVsSAnZWagAAwS0P/1TY+QoWoGrx/v3/zVX7\nWrgsu193FH7zW7wV6P6QQPK5uzdkha8LyOOhdThGstfO+JxyTbO5URmyPCWz\npkTDUeYSs9hOaXBieyas7qSgWHnHe3AQFTNpn/26ellaTkCmVJaGkI5nsO32\niKmzU71rNrroz00dnQauHCrreYlRVDcMVhzXhkAf4HH7Jb+R/zYcEOElecKL\nHJJ/VG1BJhxwqD9MddakY3aJGypCL1ngZmx0RNY9UzNZdtrrnnO2kcz773uB\nBUwm97c8CdeL9m48CHxkGLKYDnenSYlP6i7UQJvrxVkKT3DjvjCseyfMeKYZ\nC7NxykM4X7U3Rixo8G1QMq/Yff2FLmGjZgLRcNyBcf3lpk0mrM+B4zfw51wc\nRG4vf4osrsNWHK+ikXIYGFlrWvaQt6sj/2wlJyj2L1uynHVNqY2MbzSlBICH\nipD5LlOUhsi1eF3uHQlTLB7gnaLAPkgJEXv5j5C9CnSXGTN2nIC8tsAiqjgK\ndWysPIb7VSFy5WmJ3hVJTmPL3pS5vGoEMg44S4JxJ14XbNxp+yCs6kmxDYat\nXKgxcFf/BkMyEw5A3ckQEfRJxCCBNb3gsd17CwdAs36B0Jn7XFELI1DX/qW+\nz43lZrrNaUf3rr/aEa9evP8gtNjzZyBbONqxTCoZspyh5Npr94x8DT0ivQG/\nMaWc\r\n=NuOW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAc4SMWTLuvZo75gy9s7kLJtMQ+rzYZtWefG6F9suOioAiAV/emx9+2wT1FlrPmg3gPm1URuIi4Q9ytf5vrgclzWiQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.a2c088dc.0_1605018299203_0.6369731038028441"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b04d71d4.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.b04d71d4.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=9.0.0-canary.b39094d14.0","@material/menu-surface":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.b04d71d4.0","@material/mwc-list":"0.20.0-canary.b04d71d4.0","@material/shape":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/shape":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.b04d71d4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-JwGbTN0cEyfAlcisfZ1MqTiEf3efJF3V4BUfT27jUx6/aeVSuwRu2B3lr77jbSEVfdlEdDykOmZl0mwP2kq05Q==","shasum":"6bac6b9f9b35c0e95b5453ca21afc13e694d6863","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.b04d71d4.0.tgz","fileCount":23,"unpackedSize":112755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRGhCRA9TVsSAnZWagAAxJkP/0LLlOTEtbda0qmfzOVF\ndJ+niW4ezy9kUYEcvvBc8IojXPJMrZBrSYnrl8jvWyf2/qCeD3mKzdrsotMQ\n3jS/2cd7Pf+qEiu4DaDJaj4L+va+k0OqTyoyrRh+T58kfrm6XOIc/0PXll/X\neynlRwnJtU3rj39vS8Rqj2ukjV23cZB724zDff1X9yBFlvCKEj8uHnoWbYCO\nKgF89lQMkbjjzr1ZSpHSTjPeMu2zmnRBcJhhnjX2jIDelNnyjiIlv8XwWFes\nwdsHsk2wIHaf10C5og7BGFAPV8cdYdnZfURom2thUBDUgqBCNfxL9YFmnMAm\nz9MSiBsz6yTsS1UAMbIhsKmB10NHXuSuHhPBXRuYBcIOUIqozXFgZdMGgCVS\nzvd3ZK1NGpxLpJcSaoZrJqzyhagUhpbMyyq3B3aIVbUh6Oid6Td45F2+PSEF\nQqgihn6fPW9X3btx86qFTr69b9ogJJ1CQR9UZH3KcLs3jS+/OpmxqPbQA3Mk\nFR9N3+ASmXd6UZgUqkM0A8KDwRm3qMqihBPClM7mU4I09s35SG5965SnvtA6\nYo/q0APWa6RdJIk4v9Qg4y9YfBp6pb4VuYJ2CTs1oaen+pbhCaNlW1WzfzDR\ndq3nVoDB1uHhs+/QO1ODWKESrwY3a7vhy1CmO8s/agRsgses7qUPFlb9G6lS\n/qqD\r\n=O6Cm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDSncY71N+qpLPQGFyntYV+EMCsZErLHQ1XAkPdERViFAiBOMT9Gm9NvU7xn/74wvodFAmTi0bd5LDZ9MlShgosS5A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.b04d71d4.0_1605177761049_0.10244738654030106"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2c553352.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.2c553352.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=9.0.0-canary.b39094d14.0","@material/menu-surface":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.2c553352.0","@material/mwc-list":"0.20.0-canary.2c553352.0","@material/shape":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"7a02baa2ba85467edeb67014cb8c6e5bba77edec","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.2c553352.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-BaSK+Lqy6UKr0hQH/xqwYRUL60YgewKhEEHu9ia2LWcp/yr75q1t908VYA2+Kp9BxTy/ld8cBQDC6WNuG4anaw==","shasum":"68f81210e90c3f8b4fa40231364655dd9f2e1100","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.2c553352.0.tgz","fileCount":23,"unpackedSize":112754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrbqOCRA9TVsSAnZWagAA3+EP/iuEyx9ZDuS8QPKalUZH\nyYwtE51pMUH79inwjDRLm9tSQu4BuSRm+nTNF31iq3qkMPXvud5hwXe8l+Ym\nO9s2IOLCGsqAJAHMYa6lcaNL3SERCUcF6O6UK+bvJ7uSnf6nJ1SDJB72sVdn\nZeQr3TQ71HcDGZgvnQZye/dCg/QqDMcIuiJX+FChuJ1diAYpdIVpgp9h9iNz\n29ItSEBfcbXEuH/BSseNTw0UE7jL36tP1fuFpbwu++mhvMWlX8QWHd7ufPPP\nznalGzHn9QUNj9nV0SQP5Eoa/GNMAxogqgndp3MFwQ0s8Pb/z2whtjzLjitf\nHD3BW8ac/SLKhif5KH8VlU4ysDuWrOkUoR5BoSOIEO4GOUa47jhs1XWa5ZOb\n7fI8zBYvC9V3er/zsNFFPd5pOFghMweU2lecbNu/g/t23YssFFhJen24zNSc\neCh4UcVPSZrxPUGRkNRko+puJHaEPViDmSuZevN34cgPQ6/dhOPf0wmpXJNh\nNxp3egdggXOAveTcsX/qugP9tdtVKxjKvEllafNTWRF5hRCJWOG1NukhxcWN\ntIqHkzqhghgPDP7uyCAgPwx2qSjvjM4NJtWb/b+seEDndYf8pQfk6ZlUFLKp\nJ0y+AlB/aMB98zeoRy1E8N+16dxyb3GQSz9qzvVGjtT++InNiARr0os41xEJ\njUKn\r\n=LPQy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDm2yqCeaGZLJLppdcAg7ZKq21jsrdRXofYdTe49zol7QIgJn+i3DZ//iHOFHhdKODys5FHrd5gWA8RwRu3i/b/XsY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.2c553352.0_1605221006124_0.2964606076968901"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6560d19a.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.6560d19a.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=9.0.0-canary.240c5f74f.0","@material/menu-surface":"=9.0.0-canary.240c5f74f.0","@material/mwc-base":"0.20.0-canary.6560d19a.0","@material/mwc-list":"0.20.0-canary.6560d19a.0","@material/shape":"=9.0.0-canary.240c5f74f.0","@material/theme":"=9.0.0-canary.240c5f74f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"gitHead":"2b2093b7a8ece484614a94718cdac5a72d7e9cfa","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.6560d19a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-9hkcXTAondbSXUcsn6ScUuDYxqbYzEZbtI9Vyp1ygh1PkRyaQqoAshDawSR5/NN26BaW54DzLoamy8oDezmpVQ==","shasum":"364a31eeb9db0e4d5e2388bd47a0e58aa0d324b3","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.6560d19a.0.tgz","fileCount":23,"unpackedSize":112754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrvFECRA9TVsSAnZWagAAg/UP/3lwZ8QdZcGYqn9lQTMz\ncFOropUsVE3g3vL0Ii1V2p0AY/0fqO5LGQCsefEQvst0eKJEpwMVdSwJq/Ba\nj+A2FpyKWxd1SMJD0D6jGa4fM/vG+kSfVR5Y2BtDvPYSovMQj936KlH8LzzL\nZ1LCjlFA3oUCouEc+IOaj6SNmwkcn8QPiB2iX51FXvjFoDp/3DprQ1XdfWBX\nwPNXmSVrcpJKjN4dwQ8NZJjjbyMqbVyjFP1A+xQO/Hs1pAALpPK1y/1Vlq3e\nRYkJaotomyLarFNgcg+9S4PL+zQcK8COxr4RqCbnKsGb/d0IINj5R7NWijKK\nugY5AuPLmGuhnTbFHppTtOvi6OGOf/ROUlSpJYZP0FNO8/7+6eMb8msGTW5V\nH5TXVcUnXECiKy7zO10NT/OT1uhqduG8hGjRlM/sB9YkQf9YTSAjuMLQoTuc\nxQKqgNBQOEu5ygrGPogd3wLBqRMlpUW5n8B2OecNVVIIM/dJpIFebp8jbhpI\nEs+QE0c/NXDBUfZwnRuXEQMlPyLQtHduNsF14or8IPTJXzIgrVeT1ni1zi3G\nhg8wfzqa4lyr/YxZA1M7DcXi8XaljvxpjwZnv8xxOsdRFOoc6I+iV7YFU3tt\ncAxT50AO1Q+RS54vVZytmAeczJOHCLG+yTa/BBwisvepU1gsFis83O6JnZd0\n0o4p\r\n=6DGJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGZKA0zaDxasTuXChlzGvruXlvZ2bM3YyC3022JyKif1AiAnbsR28MmfWkMO84L6e6btWtTqYsArJr66WWntSMajqA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.6560d19a.0_1605300548223_0.08136745588431404"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a28d5ec3.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.a28d5ec3.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=9.0.0-canary.240c5f74f.0","@material/menu-surface":"=9.0.0-canary.240c5f74f.0","@material/mwc-base":"0.20.0-canary.a28d5ec3.0","@material/mwc-list":"0.20.0-canary.a28d5ec3.0","@material/shape":"=9.0.0-canary.240c5f74f.0","@material/theme":"=9.0.0-canary.240c5f74f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"gitHead":"f24283a75330ef6de8cd16f8373ab1bba0eabec6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.a28d5ec3.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-uSttJNMv3QbaFdol7G6p8pAZpIVcUk/P0K+cj2me2aiNmke9v1pOGVJX6e+p1i9tqAgp4dCFHodhFA169DHyog==","shasum":"fcdd8d601b276a455c01da31f59bd25f18dec251","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.a28d5ec3.0.tgz","fileCount":23,"unpackedSize":112754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+s+CRA9TVsSAnZWagAAcvUP/RV+E/rWc4TflCp/Tn9U\nezCI4wW5j0/QM1IrXT/Zhx0UNM7A1VDW+qsPgBLowVqeUY2LkBmxT59ojp/3\n8pm91mqQsjZMWb735lUtwyQjmDrx28dZKBhsaO5OWiD+REN8EGhz15Rj+AMK\nr97jbrJAnuZlkCugR8UXElnRs0ZgDAUNbYb/0ijaA84tjDXd5wZW4mMh3mBD\njykssvxjTVl8rJfCb07I5YSj2Dor5YhGK4rbINj7qREcy6llDJURmOVygKkU\nKI+7YApV8DcjkZnYpqLdqHJtwDVQ/pqoMYetRC1trLg1S5i49eQr6kezocOx\nEpwDhQz+EIhwGBNAwPT58sIo1Fdylt9CoK+bpL6ckEfpZu0YBsNv57jQsvQ3\nTCn5A2UXp5azwEz+KBqMf1RkokX53aVdSHG9IIgBrApAwSmSAv7H49+gTT25\na9BEGLI/wxQpbnjRAjq1mWkj1aXDvIinrGffSpYvQZz6se0B++b0AvXXK6gN\nx5DLi+hyqOSk7oyVVl8MoT/L1jtFpTmtEsfwxj2qLbhErxMZzB2ntd082RFd\nZBJUeh9AFjGaeFpOHb6k7hhkjr8e62W11H9aB5UjE0jcQ0tbe7VCZOBgnzHe\nO5yIQ7jhq9SpadKBMMPK4cXbnJ0h1Bi4VvruD1e/io2Z39zTZwUPsOvsg8Oe\nWLRG\r\n=UhRZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDChFvMpDs0mBOgDK4n57p1j7UGAXsalRqRMSjtSQXsmQIgMZomA7mKCMZWZsU1JXGxnv/lG0fPhrDTnnxvKg3Q5h4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.a28d5ec3.0_1605626686210_0.23603399488291132"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.03e7e778.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.03e7e778.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=9.0.0-canary.240c5f74f.0","@material/menu-surface":"=9.0.0-canary.240c5f74f.0","@material/mwc-base":"0.20.0-canary.03e7e778.0","@material/mwc-list":"0.20.0-canary.03e7e778.0","@material/shape":"=9.0.0-canary.240c5f74f.0","@material/theme":"=9.0.0-canary.240c5f74f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"gitHead":"b828c4befe76e485a57dc3be64c348c56f37f89a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.03e7e778.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-yzv/5uWCr+2iNkh4MxOGngxkY/2OorPqq/z5xzsm0srHkPHdIwpGIN9rLETJ+pzuuO/EL0GqlbzrUIGe6BPF9w==","shasum":"5179a586cb302138b7cf220bfba8dde1c3c552d9","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.03e7e778.0.tgz","fileCount":23,"unpackedSize":112754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftCQECRA9TVsSAnZWagAAyU4P/0ExAHiShsHf00GA1nky\n1xPQ2KP/3KpZSl/iVQtDUGBrYK8LhQvkt4UmkkowXzmFslY98+LcmApWEWZd\npd6daaZBSWerfjoc80bGRYh6ZWB6nwp//Bbh4pb4zEmRAYMj+fdxwDFVasNX\nX/gB613cOET+niGCBjx95O+ivJbnj4gqOVnCUNQRdxj+2G3pUWH3pk2SE/9/\nR1TztN4xeJSlynQQBSK1pn8glO9q5ylVvuZAUcHVPcg1Vnka/nD4bugR+EO7\nW9vep2TH1d02pQ23jPQd7Y+YK1aBBFKCcbZxzZKVpJxOx+ZQISoUs42G4YQ5\nYWqITIoscE9uaIVCqagqsopcdxF1oaNFP1ZyixwmpsCWUy0WFb9x4TUKqzL1\nvgbaSWfXh8bL5+jWqH2791nQ3Mx6RChOmLsq/ZI+B+JZuKcxYpcJ62zh71Mg\nq2L0M4H4fzMEBFGDafCVdv0RD4BTAiXgI7bdLD+mY63WMRn92MF4PdgZ4K8X\nHdThANUpRDKHj+LcL/BfuAqkAH/bn4MtpT5sYTIch9Yoq2tLB8AhLBxbuuVC\ne8YhitO27k7NN/uLO5Alriu/sQye7sMotVhkcLID99GrINBbzRaQ1aNp3Aio\npO9OXCMBGutOxD1/QrhlPK2zwvz4t8q7sYHreycC5arO66iASA/6/4rxt+7J\n4S/Y\r\n=VVY6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjLNnJZZusofq/SF4D3xqmsDcsQ8YBDVFxj9p9m6ednQIhAK5edL01Di5eSyiz2aahcpIppKh992BDi0PXviFkCiY9"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.03e7e778.0_1605641220204_0.15188235722128107"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ac8ed597.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.ac8ed597.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=9.0.0-canary.482ff9091.0","@material/menu-surface":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.ac8ed597.0","@material/mwc-list":"0.20.0-canary.ac8ed597.0","@material/shape":"=9.0.0-canary.482ff9091.0","@material/theme":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"324571445f4ed0575cda7f727c54e156bce8d624","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.ac8ed597.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-J+tNXMUz0DCKwGNXBkMzuIM7TrDuWaDD02BJYPXl002I8wtxIY/IUOVU+KMJnuCHmof6qbSLg358Y31bd1bgYw==","shasum":"38ed6bd6b131b71d35f86068393274d93a8f50f6","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.ac8ed597.0.tgz","fileCount":23,"unpackedSize":112754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftErWCRA9TVsSAnZWagAAHgcP/2eO6S+abB2sYrLz9COO\ntZxTx1QiR844N+BomjT7YXWCgHwozJxfEm3JThMnpOgWTLD27SWL7sx+A4Fr\nEtjrKAb0b31/iJY40W3pIC0XEHLJvm/fZxHydFoVdelLkdJgU+ZcTSagm38x\n3KckGPMeGvKNlUJ1HlZ5cUJIi3BjQJWHbulmq6GBKULrkTMLQhiKcbdbRMRX\nFgb8yifrN2uJeVwohFwNHeK5ho9BcghvMgbV3MX7qVpC++pMEFL++FInlx0z\nTz45Ae/FW2WyGbaQU7mzv5DRiQrYE3vrrGsv3OVWembyF7ifXx0XDNweA4SK\n8zgMsT93TjHK834G2hX4W027NSgO12XJlLJUCxU9vE2SBCAqNCHNfO98l+b0\nLDt6nlV1ltJ/HyhWF1XMdnWvCs5ERQefo00otTYY+tGL1WicnzWY275zdNIW\n9I+m97Vi1tPnuxZj5n9LK/nrcZboEExii0UxfSPc1qmJuvkwuwohyicD729y\nnJ8MzT2rTsPkdTWRQaLvPVEii2jCSmMaqhBqW77Bsn7VZV9kYKzxpxWyDZ9r\nVFGuRXY4ADPcnyvn522VnFrr1nEtIZYIvqQnCSMJaJdwRwkPPV+SYtpXWWGv\nlhhjy9ppqlCxkE3wA0UeJzCaafBBgrxwQLvRoguA1ziQw211C3liWEAUgKsv\nKj6b\r\n=6BF9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDIU5Gx7mQq1TQ3BEQqy4mXdOTlKYX+Hur8cwOMUl2RcwIgB1ffE05bd+xctLU9BCqgFz+1pXh+UK/mB3kZQtM6ids="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.ac8ed597.0_1605651157392_0.012147498024711822"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b6a60f60.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.b6a60f60.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=9.0.0-canary.482ff9091.0","@material/menu-surface":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.b6a60f60.0","@material/mwc-list":"0.20.0-canary.b6a60f60.0","@material/shape":"=9.0.0-canary.482ff9091.0","@material/theme":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"423d1aee62c72c8c88e9e5e792712bc5d4d10b13","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.b6a60f60.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-uTZVLBjM/BPQ2DwsI3h2w7WrKahc7Z91tYy9jeirtHn0pzE7CefZ3UlJoVxeU4v31/1mym3JoP7FiEWwvZnL6w==","shasum":"e088b270ec940dd52cc8763bac4e9705267226db","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.b6a60f60.0.tgz","fileCount":23,"unpackedSize":112754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFRRCRA9TVsSAnZWagAA4OwQAI5hsJMuSQGEgBKMXy2e\n4p20AqSeR9bssQH9B14M+g3kcljLUzb16Ad6HTtkazFQIx/7AQ5M9mj7EInN\nzv1sVIMvw7zBdSEKeiA2D+BUugmA5jqs9EfY+KJVVvO7nQ9yKape7cHWxnkR\ndp/i9NqT0eLX95kWJEdoFHc1eLsHXlNkrjAuNT3Sr9ZL0Guje69CQXwWAO0J\ndh+04br4PjWp5uG7+GOA2spaqjSGXQ4oql7xV1PVknzdv+YVIkPCMroaZolV\nN7ZL3aHAmQXcJOkGmPnZBvBk7Q39PmBV73usYi0pvWFS7GtzPd8eIGcgBjBv\n5x4mjoDRVUM3M2x17y6ak6DYcscrP8Skgfqu6GId3/ehH0jYXaALw0nXuhlt\nwJDnzyRjfjAJ08IEec8Kdcmq8oOv7dm/6DcMJ4I9xm5kUafKh5XXppbJWUWE\ngj+jDtxHxwa80KwiSFdNoXrbl8mpci6wQBUBuTDS7DPafYWVwwFytvvcvomh\nc2CsgHdzdJ07XMC1BhCutEZ+uUDPSTDut78iBMc7hVD9sB8aTDVIDtg7ZOoH\nxInDlT4vRahKFnRMJrMjsRhDnTfhbZwGYF6OMnbJQHZ3dKz4LyZlgCIqDKnF\nmt8pgWXWu2WDln+x2VgyORF6f3TXifwSi6F5ybm2+RqqJzZmU5ZbNOVFOn5Y\n/HoM\r\n=heZW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAhGs3Eq+iJJNu2/rqhHNqCZ1wf7TPa5yrTmTIng3ONZAiBEgEHqeb5Au0VW33kXUkC1z/YYdb4s7nlpRchB4kVj6A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.b6a60f60.0_1605653585080_0.15822049815272088"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.71cc24fb.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.71cc24fb.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=9.0.0-canary.482ff9091.0","@material/menu-surface":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.71cc24fb.0","@material/mwc-list":"0.20.0-canary.71cc24fb.0","@material/shape":"=9.0.0-canary.482ff9091.0","@material/theme":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"04fde8dbd7934f14927b0407ac285d7396fe68e7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.71cc24fb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-BD3ceYJdibD/BwMmufFfkVdzWNo9Ljd/ORE/8lTcsQwqHYJ3NyloZc0y8pITE838KuHtGohGH8N+JVDn7aju0A==","shasum":"adfc847cbf79b43798c1811ef1dc4d687855dcaa","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.71cc24fb.0.tgz","fileCount":23,"unpackedSize":112754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFoFCRA9TVsSAnZWagAA+nsP/jMi7VdQPlvbkSmw0k1T\nHSoUjLW5y9chYAQ338ui2Y/oYJUynBpFIFFmnNizP9TzPnZTSY7YfUx2y9fX\nmcOkrcIKyFEoRxf/YWurRXaDI3TOuJdGCBqSDrbu975HHvduJS9AHt8Cxe4z\n51aRBwHLO5PbWdF/8OsW7ALN3YyJde8bFK5yC6UMQpcoGn3pEQ56mkvT6TVm\nhrnDd10bXBwuMrE+rn3Sa0REFENYYVChvQ5J3EfgK+KVLQtCy6ZEP4scpQ28\nLC4Hx33CamFBaIfaDVoKFu/TMXZMHj3vdH2x7p4+iL5d+qlaGtvMKUTliMBI\nxcmlCEUBXcOpXwNyW5adJl08/glVM/YgeZHw4FD/0RkhvxSYA48huXqXNZRV\nGsj7f7jdPuT8c/syNyM/nxWkMLnqgrHl3sxA3EIWHWdeqA5LCfmPuWqRNF6w\nZ/ZEtxUlu2YVD/D7CUr5PpBb7tMJb9tSjGWJnBKbbWTDHupjFobYcWnn79yV\nPmntCCidhWhQxOC2kS5ba+uDasX62ypf149dKHdP+n6/x5QJHfEYs+VCZJ6V\ncrxHL/nhoeCqnPrkLprydqNzfzwVjJYBADIdG+yt0s7RmrTXRRDi2lmGsMIv\n4J9yfTD3mBkmbnv0EiFWwkPRKjIlhYOp8obgPH5rlpvvtILsO3pycp4vbIhl\nr2K1\r\n=C5NA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEaOQYdA2XaYvUXITeYWqtKlWaH73hrn3MHMhE7WiQ7RAiEAyMQtrCtjz6UPQDrnOuspsz5Ovum62P+UOMTE2SWDAyM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.71cc24fb.0_1605655045061_0.4295634642994688"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.761027ff.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.761027ff.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=9.0.0-canary.482ff9091.0","@material/menu-surface":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.761027ff.0","@material/mwc-list":"0.20.0-canary.761027ff.0","@material/shape":"=9.0.0-canary.482ff9091.0","@material/theme":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"eef81b2f51aebd88194386f191f7a40e504b6a70","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.761027ff.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ySvYRiqKygAzZP105hoSuZT8KXnXMsRRSUd35dC+8lPRDxKrJOjdh1e9W04KFyHi+2zX+HhdVHv4QsBLuN1CRQ==","shasum":"b4c468d55e2ff925e5308b66328a5d92f3143620","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.761027ff.0.tgz","fileCount":23,"unpackedSize":112754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZzlCRA9TVsSAnZWagAAIPgP/R8KqoBiZnp0Rt252vUF\njR+Nz3iQX0KLK4LBqOXTZ7q5p2OfLMVBCnnn5rVQ9I+QF9JkE1THOQ4wi3Ld\nCtgmkUYyVARUM7XArFwSFQSrAp477MVlhulqDnDRqAA1GTKXABROWT7Sp9BA\n18pOL1OhYkXV1Er4AYnEzM5Lr/LyCKm376TinODxisqUzmmI8mn9I77yiXzh\nKAumQoNu9TorDHpp1GlsBBEFjLLQwcMgxzvHWWLBPpqLQ/SBAezkehL9N3yH\nGU9lGwmQf21wJ4fUT32Rrskbk84pavoX9dZCbER7NWsD0L/ZvpYKesj+0cWM\nKsduafbjkYTMcugsZcA18Wzcq/UmhtwhDMZF3KD3IOVw10XgJgwZ+/wspkf6\nESqtMYHFopeIRQ+ypHbPr5Hamu9vaLrL4o3v3ZQ+IcrF+bxHlAIgzKuTptG2\nLLkyvlkAAnnUv5714CV/8UHQn5/F+cfrmzjwrX78kzV5Z6pr/hHFqhnLr/Lf\nqGJ6UxWY+0c5oHONkZRAANsqLiIDTmxKSahq+1LFJIcIrK9DvJ6m2hlYDm92\nVlzw9VDbk0nuWefG7OOqnvReSfzvR5htmPiIiYo/azbjXvm6hH/7wDU3eU7l\nrgcsJZGWYyyKoLg4dI+rg+5+keLixQm6x/htlXRghhVptqarSVNU35ZfeCrS\nNmUW\r\n=lTRj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDkMFrLV4FlFkVocW+LypVS1uJoeN+bMKQ6bfLbhZ6d5wIgTicpv7MNtEGBg4WufqaYMHYF82Jexvu55YIH12p0zQQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.761027ff.0_1605737701569_0.008533674102000566"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.dc93d04c.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.dc93d04c.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=9.0.0-canary.99cfb6bd5.0","@material/menu-surface":"=9.0.0-canary.99cfb6bd5.0","@material/mwc-base":"0.20.0-canary.dc93d04c.0","@material/mwc-list":"0.20.0-canary.dc93d04c.0","@material/shape":"=9.0.0-canary.99cfb6bd5.0","@material/theme":"=9.0.0-canary.99cfb6bd5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=9.0.0-canary.99cfb6bd5.0"},"publishConfig":{"access":"public"},"gitHead":"c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.dc93d04c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-0NKJE9WhR9H4t2BLhPjt1SBbSqlrBykbP9NT/RXpWHrtfMZ5SyWE2uXZpD4T4LdHKl0hD/cf1cZHWJ0U7r5JzA==","shasum":"fa50650fc4818d976f342f6b0bce94c0f95310de","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.dc93d04c.0.tgz","fileCount":23,"unpackedSize":112754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZ4xCRA9TVsSAnZWagAAnrUQAKBuVpRszUKgyZ/pOhEe\nbkIW5ILtnfDNI/X6TlKYJWsirerQQyslgbpS4QJbjT4hAqwjB0cf137qSCcV\nvBeKF6k/bKKMc2/VvbzOVE9f+vFMUYj1DFyaPMaUSqaABEYrjzd38XhwwWp+\nE8wbWNdMyxydS6tQ8m+E7CMxYf2jpT0+yIH8TqWMueTY5pjcFSjqCvKBk9vx\nnwIo/rVbQNQezxKw4g2RvicteaX3vDdTBe3iXc0uDPWZtPQhxaPgXRWKdtSF\nNXLozUIpGmeplzvDipY8+rGWwvdiOOYocsJ06yg8Juevi8D4ZJ/BkeF1ob7I\nv4h8ZKBbIVxlUKKRMi7KQ2mQePyWzQZJ8oq+VmEVnV1gfB7YWtjwbcbAVw8A\nMnVi8AnO7tmdwvUZMvy9kpyVnR06TZQREZ0K1IL780WlNQayJwRrZkG9u+FK\n5/vLWESRsV/6Wl2LxP6o0H3nZFbU9FXE8zIeNxkLP6Bf2SSvpevlNOzuug5D\niU+4gVlJxPw4ewsaIiMXb76lVia3nMe29WqRiXKlV7ewg8RuFUnULjJr4o5w\nsauqurlWd/mI1uF9A3oKxq8sFOrMihDlbzPY0xaCnaLNe4MCZhPlGBj5cCna\ntzNFz5NnX8RiNXFjdgxxUfu3tWFDuV2zdhUit7q/8/JWgi0oHGg/9olvC7B4\n+v2H\r\n=Fp6A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDiXnd1N5v5k5DY4TfSYGZIPTRwBzlKhQG6MSfo4+OUTwIgFwpY41fv4Px7PyEV/sYdVoVX2HVcwtrufCWBMRrnBqY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.dc93d04c.0_1605738032512_0.6129935559170931"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4a5d4eeb.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.4a5d4eeb.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=9.0.0-canary.99cfb6bd5.0","@material/menu-surface":"=9.0.0-canary.99cfb6bd5.0","@material/mwc-base":"0.20.0-canary.4a5d4eeb.0","@material/mwc-list":"0.20.0-canary.4a5d4eeb.0","@material/shape":"=9.0.0-canary.99cfb6bd5.0","@material/theme":"=9.0.0-canary.99cfb6bd5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=9.0.0-canary.99cfb6bd5.0"},"publishConfig":{"access":"public"},"gitHead":"6b9b0de3adf5b550661d63baa970642b71da5fa5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.4a5d4eeb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-hnba9Vw0b36B+D1OWsU9lLhS9t+JUzj7eOsz4n1lfT6mPC6QO9P4aX9O51DwhgHo+20EbaHWj0vK5f1/PFXhpw==","shasum":"d0d0740708486e1294690f7fe4671d23b2238d04","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.4a5d4eeb.0.tgz","fileCount":23,"unpackedSize":112754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftleECRA9TVsSAnZWagAA2lwQAJrnQSJi7xJUUHt3IG6s\nJPxk+mxJuyNz5j83SqQGYFGrRvwnJLd/6HnQgRfyF4WLp4ZgBccVePRoPqcJ\nJm266x0KiGKsl7ecUSzYpEmub/jX+HHNGYS6Mxz1qIANJXNitrKk3L5yDZ2v\n0IbePj38yijcIClf4bEw+sGlKoWuxBOAV6TMt+Ds1iT2Ao/7Wq6N3vub2w9d\n8IfYu/SIzgu15jeoqYABZLhO/M/TDaUtuheJYogHfykficoyfw45dGESBMnv\nIUepsciNusUJxg4tvkt3nC7gS1tmehPw4AVbcsXO3EPZRgwkUDK5g9bKIbpm\nEzTxecmb1uVWYSFHu00SAoIUWCkMas0OOubBE/93DhC7Ky6CWVXIZPfNmAMt\nZ/vWyXMlFdVeNxnTVCEnljyH23qoLs64SnXER0oc94rwPnS3cgedR59w5eVS\nAgRJGx4hIuU8xpGSx0A8QqORjCnekrnrndeigzIA9IPlY/1DVn/+OIOyyGBU\nOQiG1YD0UHmuiXfasF+iNQjsADoCyHn+d4eq/8UhXfbS6NPow64KOJLGUPVi\n1Wei+netwCnJBVLgLAysRbyM8E8jjxCOn0qlzy/KcYS+UvMBFABVy0bPL3t1\nwWOMx7A+yMf1yHqYAbDELjoWasNTqweowtkXPKBPUPQyGSbm98oxA99fDHSY\nnUPv\r\n=+lIL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGtUQuXGnvocVVNi29MoZTtgI3LxKBdqvdlIGH2QL7pFAiEA+gW6aJAqroFomfcuSY6mrvR+e+BWAsHSq+x8W9Ggu/k="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.4a5d4eeb.0_1605785476478_0.5973474244051353"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bd176a15.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.bd176a15.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=9.0.0-canary.30c11bfc2.0","@material/menu-surface":"=9.0.0-canary.30c11bfc2.0","@material/mwc-base":"0.20.0-canary.bd176a15.0","@material/mwc-list":"0.20.0-canary.bd176a15.0","@material/shape":"=9.0.0-canary.30c11bfc2.0","@material/theme":"=9.0.0-canary.30c11bfc2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=9.0.0-canary.30c11bfc2.0"},"publishConfig":{"access":"public"},"gitHead":"8c9d27b834d60d0f197616dd1acd74cbf2cada07","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.bd176a15.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-t+gHvKdMcuOedL5FY5wcxo/u//3k3PMbD3hQdWlIISkgfSGzb8QAgyj3LHvKfjncy5ZFNBLRzP+DVc+7T/G/Uw==","shasum":"f1fe3360dba7f91c16c1863b32f097baf2d9ba85","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.bd176a15.0.tgz","fileCount":23,"unpackedSize":112754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsNUCRA9TVsSAnZWagAAEf8P/jwI6qG8o579qcdTLJ2u\n05yyZbJXF+uZudTfLhFLHWu5A9qCLlr0aoI7BbDUwQhvKJuaAnJjeEDAwDpJ\n+Gb4MECpf4waJCYmtPIOhwAD8kSCxyr8EJv4lIh6VyqgOz4Ej9a8WoHB9n0t\niEh4OxAvl0btT75mfu2IoNnuJ57LRN92YoQiCLxQ2FKLoGwppWQtznEoshmq\nGC8Z6ZaKXXF2aJvTG53AzNI9IeaMvqudMiDhhenSZ1G10UWrpuiJ/0NOe8mS\nDoLKiXeynUKfyg6D46cc2BG1+MS+V/v25V9Ignf/nM4vzYgfOn8rSJc9d5wW\ner+YxM5TIB4Ux/TRDbx9i0OrZUO3j4kg3uYdsFcOl7UFSQT0Vh80KehHU7FZ\naFM3At5J52Vx6OikzGRR1FIBGqEo4NQTJS/x/KiiJxkZzVlIvo2HELGflvfd\nYeNgm78EG4kYuHNe+QQBC9VxDGO+awftALRNalCcDzkqfudLlS4PMlRP1i1b\nEgzMybTOtUkh3ubhmxZd0UUGgzES5vw7IWZuPFpXH9elZZp++6yWJVPGEsXk\nzs6Q8bvc2bC99iwvoG/RqRYjBdH2GzSsSVCrXbGnyp3+Kvv+JrR++tNFtUNv\ncsKafUdYe3JjC4X5LNrmsPe6eJSxgkVIDXz6b+7kWHyNliCmOubnYbaFr7gh\ngjAn\r\n=ckD8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/FiVuOoout+g3gkwAj78kvIvFFdlbHZ8NUl5pg28WdAIgZKY1KDoXaOiMB6/xrJXOn/2GSBzn8yrebCVcwlepKaM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.bd176a15.0_1605813075804_0.7060826139678755"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.e85aa60d.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.e85aa60d.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=9.0.0-canary.c927a5d05.0","@material/menu-surface":"=9.0.0-canary.c927a5d05.0","@material/mwc-base":"0.20.0-canary.e85aa60d.0","@material/mwc-list":"0.20.0-canary.e85aa60d.0","@material/shape":"=9.0.0-canary.c927a5d05.0","@material/theme":"=9.0.0-canary.c927a5d05.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=9.0.0-canary.c927a5d05.0"},"publishConfig":{"access":"public"},"gitHead":"3a749ec8278eb0b5833500696f08308837328144","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.e85aa60d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-WhTdYdrKwRrDRXm3ukByGqqaEJ3njX0M4uydI3FUjG5MkruUeHfroA6yxuREQSqFHa2wvXQjrWIilwCSBrR8og==","shasum":"ac69bdf31c4c7449c2b160907a433e88766df326","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.e85aa60d.0.tgz","fileCount":23,"unpackedSize":112754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvDbVCRA9TVsSAnZWagAA9AgP/ic6fOEob9fK/5be6vWz\nv/BAy12/SnyH6Lo/QaffC/9AKB3OrxZSG0PTJhzqmnGj528q5TREHNET3fmo\nOUCS19/k5IpOhMMITRY1UuoAXHXiWUDAyYa4BagdJnzxvpzPabeky+VjZ4x/\nxLskSX3VSt+3TUfjJqkFs7k+I2LFFUTthF+p5cD2SQ+kyHyaFtEF2mRBKWPg\nDNF44tSCyLMl9HbmkKRVvlqvrdqqK7/p4yE9aisoVtyFVkrN64o6mfQ7ojRu\n9k3QViMQlfgu68wLW/wfJjjdeK/5k1MyYVPHjt4zCPtCVboglWb9QkYDeOZ3\nDwKJvmF1rlHqLY4g6I3ueEMJUK7blqURQCtZiWeMINHhOiN1QCj2rfoAckl8\nNhy/0t9ulmANYDmOerGaUp7qDS0Ijw0SUN5wJGMGuizkogzvOHKh/HJgFzhs\n0Ze+/JsJLOOB1RxmBe7dPm1Z/NU7dsqfwCc1j82bfOIo2IVMIs2wG0+1Bfpr\nyScmAeeFMEzL714F1lpgHEh5mEf7COqsUR/g1Oo51CxnOCEFm+jKBExOS6YY\nx22rLqtHiGs+Q08E2IvlqtZKg+0AkvhzEEcnf/7ImSSzjxmqiUnqEa7zfjQI\nafSx/AwLdF2Xl/CVt9r1ETeIvsjFbm8KsjijvyquP4FRMf7iZbf9z5eS2wJ5\niJL6\r\n=fsiS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeOQUoDQ0m6W7tbKiqOUk3TvSTxOhF/EQpPXJZZRrTnQIhAJ1ZVIUoCcX5dNIGh6s4s5kgEZSmD9vJ9wUwOtukbqPw"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.e85aa60d.0_1606170324726_0.3903087133145149"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.72092360.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.72092360.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=9.0.0-canary.c927a5d05.0","@material/menu-surface":"=9.0.0-canary.c927a5d05.0","@material/mwc-base":"0.20.0-canary.72092360.0","@material/mwc-list":"0.20.0-canary.72092360.0","@material/shape":"=9.0.0-canary.c927a5d05.0","@material/theme":"=9.0.0-canary.c927a5d05.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=9.0.0-canary.c927a5d05.0"},"publishConfig":{"access":"public"},"gitHead":"ad7741df1b6ab1f1eaee400d6026dc5ab7821d66","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.72092360.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-iUJ2XxoPkggqI1EMJZ4HqCEfqIrC5svTGaWqgyHI+MY3v3/zMwLXVXi3H8Inv1n0hjlCTzRBzu55L8MMe1y7qg==","shasum":"679a443dc53759bbd0036a1133bbfcac90a1fd85","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.72092360.0.tgz","fileCount":23,"unpackedSize":112754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvImqCRA9TVsSAnZWagAALWQP/RUfKm8HBFVJ7mj/KzEd\n6ZJpyZz2Yhb9yrjsGoBImVzADL1Prwo4ag9RLljZCZ1AFEH4Yf0pew0cNwMg\n214jXyElPGPViElec0Ujfyu8eoMJgx7LzVDTjHuLUOE05vf+LEvvpV5xkxqs\n1ChXZPYndo085xQS4AVWrlgvdf0X8szYyKjY79vaY8zbDGGEM7AwqW9Wyst+\neaZv+tmj2qq4BrdASlF5DH9dwW1L2F7sScFyAuYkT6pAFiBap/vlPW4JoeDV\nwAg8P6GEb3ZiTRqNJGe0N+x4A6mfvPwWwvjp+SQlUZe9tspCKmDiv6Np8ugZ\nyV/+gCsWRkXEy84V1B6Xxi3C6M2cgsvrlZozp6FVOsMyq0tlGy/Gvd16LVpx\nvihQetVGZJL1zw69IfhkFud908LNVr6mIkUZViJKBJBZL+J8adYB5f9fLl5j\ncBsGs8ZpbABhddKyURs+sYB3VWMN9wFHRU5wXcEfOTI3gihswBWybfc7I/L3\n6gYeWxA28K1/ASNwc0ZtnhEdghat4NgrJqV2qU2z1vNdCEzKnZkBEwQNFDFB\nt+zwDeXicxswdxuZJ8P9QSZheD4chyfKkfwjR1DXNDigsK7cpNvh0Je2vRDC\nrtHE5FqITa/ZqxrTjb9eyn1a7iAg6fAURO45X+1BGQEQtgjnggh3Jxcm9Oeh\noj3x\r\n=GWGJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB0Qt7et3BmwxbP1DVI3EASDdcpfmK1kfPP1REuu72DeAiAA0PWd3vAWdpWst+vNU7v+8+3rpNi6xeNJYeCDDWOKbw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.72092360.0_1606191529691_0.8878670009005174"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.baf9d39f.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.baf9d39f.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=9.0.0-canary.ae27b44b0.0","@material/menu-surface":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.baf9d39f.0","@material/mwc-list":"0.20.0-canary.baf9d39f.0","@material/shape":"=9.0.0-canary.ae27b44b0.0","@material/theme":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"aaf8660af2b57dfe4523a224abf621deb5b5d3c0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.baf9d39f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-L0IUw8i37MJUxxSUb2Rp5HRi+jHPqvDsAP+dflHR9DIC5sQOSMt4jV8OshEy/JjaAJdJC06ZTBV00s/af4LtFA==","shasum":"29c083788e96c1b229c1b8515644bda5e25f4110","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.baf9d39f.0.tgz","fileCount":23,"unpackedSize":112754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvtFLCRA9TVsSAnZWagAAMIQP/3fexQAmdVwV23rxQ7ZS\n4Qf/xEfiexUyhMELrqOFBmnnBUr/mRIMAVmtGhwZ3v6xE0S90BKT4vzupyOm\n0q0Y2pGiqf0Cz8zlpw8OVd1ohYTk306mQjqgJct3hotwy2w8wATp5pPym5ay\n1NLsea6TbenrlJcOem1vWT7jnKhFmCDZr1VnMKBNE4FkkovyFHWXJbUnQtvi\n8Lym5RaZws3qBKzMbxN5objly0FJtgE3TEr0p7Z2oJ35tKrfCvB3xVOS71Wt\nkGCjS4Eb/8fCLT7LfuDvaACeq3j/QeMHI4PZdK+Shp3OgzF3bBlBQj/eQbLG\njjf02q2K5sY3p1+iwBK07EVXnCaMVrYi/0Ec5WF7pI3Yw55loQK4SMZZyz34\n23rBqgB0dAAKfHR0NuumalJH100JLlKlJujv5JWg76uTKybZqpp42+ZaLz+8\nrbObELiu1F9eT878DBhaYolehsUcds0ovPcpU4qk8f/hLQCvlets7fuiRMcQ\nlTaCtrs64RH0JNnJ5Lr2oAFOUNxB85VIf1uusPkaQLD48w5HrSzZbZbFxD4g\n2kN5/aN7L7sCNnSORXkqkaGaxjF9vfGQ98D0JYKXw3B4g0ic1lEhUEhsl+3r\nW972N+8i08P8Wg49bLIolf2PMwrS9VckXRjJuWGuYotDS0vaVyeh2dacYetd\npGF7\r\n=KGCT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDB+rqt13MLm78J6cDhPJ9ePE/2d2L6Dd6VXRdC0JF3pgIgELePPEEFbRRXZcPVoDxglVjjT0VeuiQvAN9G1i5Cmm8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.baf9d39f.0_1606340939251_0.6158449113385265"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.51aab0ad.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.51aab0ad.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=9.0.0-canary.ae27b44b0.0","@material/menu-surface":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.51aab0ad.0","@material/mwc-list":"0.20.0-canary.51aab0ad.0","@material/shape":"=9.0.0-canary.ae27b44b0.0","@material/theme":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"ec218298fa6cb371e229348142cfd266d65cbfa9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.51aab0ad.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-5euvL/CXSG4XxvScBN20sh/+Is1eJWyrGxXUEaaK38fFHeWHdSfo/aqai27yq47ttIXoMRBIYfO5+rvcft6R7A==","shasum":"23e2c0fcd97c515a0ab473bc77b6ec7f246651d0","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.51aab0ad.0.tgz","fileCount":23,"unpackedSize":112754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxZb6CRA9TVsSAnZWagAAxOwP/3tMRVjLPFPuQ7j+c45k\nPUJceOn+3qGtrfi5ekMV11eIgcsSxCRMX0CVlJ7xZLqVG4NjwQ57tvdDD6N/\n/UtMI53OL3O7wH3eO1sWmUfnfkjpPovEhdtBHKHI3ys1srGTARKjOwIBCvoe\ndeaFR6ICkTcBpGk/ZYhWofCIToLw/Ta8z9FjwsWTSt7RVP1ilSEKyTOQvxr2\nqQTjU1xuc+0PvIlNT/r0EGYhMz8j8Ic6jMJZfK1BPNtXTf5Y2sY28wA86rH8\nWLmrUtdObNbGmUfwMKzxzo7Fui98IJEYmdl0LhNXBfRxn8hkgrv4DrM+2vR+\nD2CnEHnq3SqANn8EQV9elbvKJbAxTnVLxIe21Yd0aKiR64yj7FoDkEZ3Fpto\n8o4v6ZsGxcvSJwY3KhqCb/PCRXI/q1Kl0QQhlFDkLFL/4FzWZdY2P+R4CJlL\nA+E3gUirH9sqeg2uLzR+BgcfbBFLaRTYRZZo69cPQ47cpqHtHvSBVs0czR3+\npJ4YKhqxS1xwbQ0G42ZJ8KsIXfYtrXCDZo/KbM+cnFaG5+btTqeHjbgo4tyn\nLj0ShMqfkzvO73AFibDlM/smc/bG3aPDaZwLVuZJsCJ1+GlhByOto1hZEc3x\nQbTuPa8fAzRq3IaLHwUCZOX+8513mHzRV6tqWZhOwA8XqqPKpbU1H8neRvPA\nUNV3\r\n=DY7E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDzyUO3mvCzqehIocOTuEzD9n05i5Py01gysje41pp67AiAkXMwoRK/QJBB2M8GJXbExg3zw3jU3sDN0oU90iv5vBw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.51aab0ad.0_1606784762094_0.48750991173925606"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8fd4af5b.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.8fd4af5b.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=9.0.0-canary.ae27b44b0.0","@material/menu-surface":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.8fd4af5b.0","@material/mwc-list":"0.20.0-canary.8fd4af5b.0","@material/shape":"=9.0.0-canary.ae27b44b0.0","@material/theme":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"5b16bb5535dfd0f880b710b51d20b7085d91658c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.8fd4af5b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-v3obt9ROfEBk2wnURZpsrAfBh2f6pJ5QX1N5NQDXFGvPp+NslZqgIuzGpkwObqsgArLRUkEsF5RZxKj2JQP/5g==","shasum":"8211785478289202285e0b6bc48a077be3dea737","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.8fd4af5b.0.tgz","fileCount":23,"unpackedSize":112754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDEMCRA9TVsSAnZWagAAJL0P/2VnFGcecvjYtwMTNYhL\ne304Pn2TDGBWL8T+uBUMmxa6qBwp11xQD+3tfqKwMjiP6fH/pCw/ocXxiJjn\nMUdpszXTx25/6bghhW1QUn9oGhYJ/ix8ZgOr0jDWNNORDubbLrRzkW6N5nu4\n5+7T0+jnKMbsmCNpN26nYylPv34zERjL1tB7OaX1qzRrJVA46l7QUE4tKm5D\nXugvFBESWxKA4Zjy4LoVVnQcOT+W0jBTZDMIBqIqJlBZuux8Wg5R/7/MMW/6\n++znn4NJyqQRBByCBpatIipNqRTQpUYr79o0vfkLVqscrSgB0KxRIqObI8dz\nGTFh3boKR1kDesazalZBob6NmuhHNHjyVYsc9UiTau4q3TAQKzkXSepThp9J\n35qp0hkA0mfaJrSdj/5bq/buyF6BRFb/jQQAIlrchooAAdoYxGKgBuMWQFvB\nOScHJHDL69tYcBkTpq9z4+cTqz+HLWMxqB9bgIegpmLs7Y5ER2GEQrzkyGvs\nwuQrvV6NjM7P88sb6b+qOd8si4TkbSVYdaJUsOxFjEOQZR3MglWQd1I6NAqA\nU929Tb2Yk7j+yWf3CTTn/m/nM0aaV6exQs7FPifXwxJkL8MhgNTOYh0orhGI\nPQ79EenTLqeYcUMuS4G+bQ738OuXt9h2kTkb0EmsXJqSljp0D0yAtoW7rEeU\nC50t\r\n=d8Bn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAttaIt3kVQ8wc+v7oLCpnN2IVqj0LC/48WfI3clu4YyAiEA4Bt68chGXUXekaHbCExLXq+eo88cEIFmcBviDLkodmI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.8fd4af5b.0_1606955276154_0.9801076751295765"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.26d14d2f.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.26d14d2f.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=9.0.0-canary.ae27b44b0.0","@material/menu-surface":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.26d14d2f.0","@material/mwc-list":"0.20.0-canary.26d14d2f.0","@material/shape":"=9.0.0-canary.ae27b44b0.0","@material/theme":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"50590c8a7415327322f7e0115bead5b6a56b9d50","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.26d14d2f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-qucrbhw2Xgh8vyL6lE2N93uE+9T9dlJEi0J2Nxq6shQRasTs/zDjcB1Pqpm4QAwsX+hsRzNMlhDnu2XNNkvLbQ==","shasum":"d830f28edd9cfa9ef00ac48dd707cef32d7593c4","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.26d14d2f.0.tgz","fileCount":23,"unpackedSize":112754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDfDCRA9TVsSAnZWagAAPQ0P/Ao2gYdgF6HWcbwxmAgT\nIg88ktQLgL1kcuD8ugjQ/vxOmaXH7+ExQYGKbTxC5Da3BilAQzvfs4ZfxSnf\n/rrvr+6VvTJVNtioWRVpIYVywd8pxmbAtkZ/VWSGHHb7Gn0cPvZnuiKgLxKQ\nx/8VehlbGb6wrnEN+LSf3h6neIEDBtwP+krurRFkIqIo5dUfYnHuB47Z4x6I\n6eI3bvQnQmmCl+R4MPp0bp3wSnOvX0Hc4/fGEvEywGbdv1E7T07O3B+y/js0\n2G+A3RQBiPwUp6LWy4VAz21H9o62aJWvmi7Dgr90+A19Kmd5Y9CmID80JWru\nBpvyoBJszV5CIY6JwzxsaGN/hB1mDx+/eV1sENT4Jgj0murb8ecSzg+VA7+v\n2YtABKWaoyGx6KEiVcfPQSFlg91Hb4OTg3mJwQz5kqtsYTXzNXG3fyp3VO/z\nz7Vs7GSUKSM3ROA1HK2aIlhXsLlUWnTrWY1401o+t0J9QzQ3sbxI2jE4FYjU\nYW3nytIglqYd+0i5tf56yEaWyH17N/rYStk08oYTjgqTlyBFTd+MIEY5EczE\nyUT79KT6fFG2z3y3uy/KtSGzusjuOh+0RE6tpoO7yZIO7tQnzVWkB8FIs8ww\neOv/Do9Ygnc0+ZA4UGGG4qVdY66S0KSvEIptYrtQkZOtKx9Yd4Uvs7VXvYOJ\nIOwQ\r\n=bgRa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC88rdKxxVVLfoJa+XTTnveUWb5xbcNHgpw4FcC7Cy5yAIgOZ3OlCb9TMJVxSY5I6ekWBoXUPt1Vz9Wxy3p93WMN2c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.26d14d2f.0_1606956994691_0.47361444728026547"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1663d7e4.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.1663d7e4.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=9.0.0-canary.11da3c0db.0","@material/menu-surface":"=9.0.0-canary.11da3c0db.0","@material/mwc-base":"0.20.0-canary.1663d7e4.0","@material/mwc-list":"0.20.0-canary.1663d7e4.0","@material/shape":"=9.0.0-canary.11da3c0db.0","@material/theme":"=9.0.0-canary.11da3c0db.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"gitHead":"864efc8adbe583a57a2a7554cb0b3d625f3d52bb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.1663d7e4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-8L2XVX4Rbyi+jvn43vfEB5+kwMTzPaO91RgZ4y1WVqkwdKT90FTH0IIqqYU8f78kVq13bJamruXAz00bPDtjng==","shasum":"69277aada255519eed34bc604e12064d13e89fbc","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.1663d7e4.0.tgz","fileCount":23,"unpackedSize":112754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDyWCRA9TVsSAnZWagAAbJUQAKR5oQ6zNHhFHvF5ujhH\nyY1EasKObdU8JqKpHpG/iWMWJn5j4Bytrvzy0Bg+MSPt5e4UfQryWg+8YGqu\nAPYLksdPEak/YZ1jVxZJDzqAfE4sDfKjD3mLxYyfRmidozQUus7NCCAvA6J3\nstc49+aGsdzQlyWEc5wYEbxOwOQwRrJLfOnCEGomLjC9Rx84Vjo1ubd2dBKY\nmhNucY7twGPDv1VpOORJipStLiizsxibPX8TWE8YSfmiNDh5jY6pb1hAGSpM\n32Ykok84KYq6z8icpdyTZS0YNRMl/GuoAMKo6mYnUC0mQgFFWahmLAeeJK+C\nzGWbxipQUDk1Nk9BJ7dRvWX7eiCoeXHn+lMUNroH24aOuSOmeIGLz/bxuxQw\neObmtjieI6pvKaVdTIgL10w+tRPYmWbw8nZeG/+uxrt+QDVnRcr9cSHHAlVd\n8g+pQ8fEEYAn1C2+YObs4JhtQbye9sqeQ92EOxi7O6xONoOZLqI/T/KqDLK/\nAqoibwviU+O6Tg2XIhm/j9AhKwrFREwKDFyqpNGjeNofA1R9OuFkCcDb2IWW\nvD1MCXYvCrFiO0KxRY6azehvcH0ewpSdQuVPpUsUf2io3AgQQvoxqax/uo0v\nqnwYac+skL/SPP6J1cWDvQ5Uf8xDNL+xRBQ+f+ESTIp5TmcEqL5Sz4sP9AOe\nrGJE\r\n=9cVh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICLWtFVKyewlkpW4szfPngyHTpc3oUAyi3/eImgIm5ZBAiBE6O0j9WXTohICcT58rsG+/LWl8fX6PAGNvzNDf3G/aQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.1663d7e4.0_1606958230046_0.1015785202233137"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.cbe9fc12.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.cbe9fc12.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=9.0.0-canary.11da3c0db.0","@material/menu-surface":"=9.0.0-canary.11da3c0db.0","@material/mwc-base":"0.20.0-canary.cbe9fc12.0","@material/mwc-list":"0.20.0-canary.cbe9fc12.0","@material/shape":"=9.0.0-canary.11da3c0db.0","@material/theme":"=9.0.0-canary.11da3c0db.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"gitHead":"ecbb2ff521324d43ca1ca402e290e52618e0454b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.cbe9fc12.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-BvnK7VWyP3SemqcyvstWRXhwH+BKKMnlsNAxlS8u8q5PI+uqEYAE3M2sRVldWuqxzSnDkStiAWAdRdDuL6Nr9Q==","shasum":"ecfcc84f186b1d1fdf58639c46f5b5d7072e1b53","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.cbe9fc12.0.tgz","fileCount":23,"unpackedSize":112754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTeOCRA9TVsSAnZWagAAQFEP/2qjPCAe8Ag/rtujLMeu\nKAIej8h5Pl4VydgOS0Yd3W7K4lFO+a3klH4qxl/fpjPTK3jbJRGq423lj2Mk\nWgz2QrlW5C6/RMwBpgJWVjyjYHTmMHtQVfrtFbioUdp8sQ/GsApDnnSe52/b\nXNdp9XBACznoYMWqVEHxjLRVR7Rrd41kGlauahhVLimpcmEVfPlwt5FNZira\n781yH4y8SCnI6OUq2aPifqyoS2E1XPNsC4oXbDsc1U/P1C/kPnxO2E+fLUP2\n3f9Ub+L16c2JThfg7iV9MgWsfFe4FTr3Y35ph5YqrA02DJx6tFz0crmb2iiX\nWADtO8pXQEkrd8MXuRUlQ+H2yhrAes4/DoleZfZciC9+hsxP/+ddxlrL5KhM\nbrlOCUlMAaj9zstsFgEjcEMrS5nD3izNPtoVYgdoPt5DhARUMe0/VU4zX7jE\nDlz+thsq+J/pQDxhsdh1X9YzH0ojPFb5CtFWoqu1kbYGNign7+ja53tO7QG8\nJjLklTZnm7X3PHz7PLMpLLCFA+T5hjKfHyYYIz+FawvJgMFyGJMGxP7/QLi+\nDrgQPpU7jwg8BCQWv/MFtq7aIgWLj/ZuaxUIoxJIzQ6UhqgQeQE4VDLDwQR8\n06UqT4sVlXNCtFuMv7480g2Z2SSFC+Mj1xoLYl2v1gDZFqxokNVwdG79Yqyy\nOSiv\r\n=1guJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAjLCZ2t1V9vGjT8gLy2pqxGBuE0IKNC61lbq18MKHEfAiEAlY69/zLcHk2jE+7Zk5Yyem4E8bv9aHdN5ZnPtp/9zRE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.cbe9fc12.0_1607022477844_0.41831617566481194"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9755be10.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.9755be10.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=9.0.0-canary.11da3c0db.0","@material/menu-surface":"=9.0.0-canary.11da3c0db.0","@material/mwc-base":"0.20.0-canary.9755be10.0","@material/mwc-list":"0.20.0-canary.9755be10.0","@material/shape":"=9.0.0-canary.11da3c0db.0","@material/theme":"=9.0.0-canary.11da3c0db.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"gitHead":"45ec0e755bfb97f054d48e3543837f693347d6da","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.9755be10.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-a41mm0cjrY9bVyZfuM7CAuKvhASchh8mehp2ZTfD6Qne3rgb5+S+E7Q+6u+AmA0A3kmL7+xe3DnRJGw7dXN1DQ==","shasum":"1f6ac70f55a986bb6bef6ed7bf1b974371373f01","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.9755be10.0.tgz","fileCount":23,"unpackedSize":112754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTvJCRA9TVsSAnZWagAAn1cP/3TMlSS0K1HZOAb8zqsX\n4ShcSV8Vn5LDu0Jwp4yZvTqZrOMFb8RTA5ku+FLf2nel5vkfMWGOKVukV7DV\nS8If3m9hV/V7UO+d8sOkntaCR1BjdVqMdpi9NjUXZBxDV4nDUjYADdpw7aof\nIr4MU69mZmc4Rs0p9IhJSCvrjDF3Ua8CtbELTx8d1fWPspF/qvj6EmRKAgel\nhALb3ss+YcIEPJ9qNwWH86R78UQEBGSThsUfUjA4WBD0bBPcYCLKy3ipZdxL\nEQUuAH/7MFGLPk65znZUi3iTcL7ekxJj6Tp/LyLmrwaJccM/0zxuqY/Xy0dz\nLBgmLlrJAXXUFcDVTVAjvA9JJT0qkevP9ozXiSYDflEwzaYFQVybVUpFLpIK\nZW571RQLxbWLKIU6WvKWeBD0lsVNTMk8wCggJfs2wYmN4cw6eA3wX0gNRKSR\n5sENREq5t6qYevhgUtODAYNO/K7kOmIM/uvTp46iI1rbtehp9X8xMIbInl1L\nY83APHnsFx3XSAA0sDQpEvNSQrsxEXw5jvvtU0N50zoqnjudJARNUq/4U+K8\niyIzYHVE+LxLf75coZ/h2WBcoRKLV4B27XdZvZInr//QqzSikG5mrFmeCqBD\njt8jVnXX5ydhx1dLqYmeDPtIOOkg3ygh5k9H5N6nrmlHCUEU6ZsiU9ZYsagi\nmbm4\r\n=BTSi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBLkNvQ0XwV5APgSCfIs04u0yMujNxQBo2F6pXSEl6m7AiEAigo041OkrZHsnLP2zUMjqceLGsexMXQZ7nH+a1IBqe0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.9755be10.0_1607023560750_0.11407179350382379"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3f64270c.0":{"name":"@material/mwc-menu","version":"0.20.0-canary.3f64270c.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=9.0.0-canary.1c156d69d.0","@material/menu-surface":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"0.20.0-canary.3f64270c.0","@material/mwc-list":"0.20.0-canary.3f64270c.0","@material/shape":"=9.0.0-canary.1c156d69d.0","@material/theme":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"048e0b4e0ee67cb81910736a7dcdae5e949a5eda","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.20.0-canary.3f64270c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-+bV7ev1ff9UhxL3KBM0Md9s5xPQVpkMQ/rGRNX0yFTCGmyVY3M/9qX+pOyCer49o044d4w5WSdCGgDgHZz84IA==","shasum":"48e67d36e361ee97e149915680e978a579a92639","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0-canary.3f64270c.0.tgz","fileCount":23,"unpackedSize":112754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyV2pCRA9TVsSAnZWagAAgP8P/1rbBCsAIDpZlxDsXxHw\notLz5ioL3BQ+KQs2ashYC6w9MZwpvuVZ/ROZD4C17iXvP9QFDe0l4BN9bKZh\nbMDqhr0/MRDDRjrP0dZvJJXep2Cl3+tvfdaV3f/+E0LrraDB5g8mqJdwNBN8\nfJwh1X4mB7GOV8YxFixrWHL7kF9+oyL4f3NpFSPIFIdNzsYwkYpSx3TSWTai\nqnLPt8hspLVS0lQ7GcwSPeI/nNx2+X8JnudwXAYH/QT6Faupr89VkfiBuJF4\np3+d9MDNMzDXuhoz5MKK9ylU7WEzOJMTmftqd2IsJIzOWxsZz82Z+ystiZvg\nZ6U2Yw4boJtwnug7YG7FR/bMAL9VUd38WqwOA0g5NDFJpQgVt5554SRRbrD7\nEEPfzWKSpBUC2JpbW6HgzL6bxcikI0eNfz7eLdDJZd3/D70zOvAKHx3kFuD8\nE3w6y7VHXrop+Vy5K9s/WvzUEpPF7adGRARaw2XGwPwtubuYv20yIBO8lXvK\npGTLlopnB9pTuez+KDBJ36+Hy8D1AjbP7ZjdlUXGqdNqCW2i02VOpZ/tu1Le\nSbSBYlEZ4v3p2gYnABxWFIDqssLNkem2vzR5R1QBzR8AC0jMY4S02kCfYmSp\nZbHCvxpkDiUCj0hZ1waRS9AkE1atqwZgcAWqDOiAjU/9L32J0y0O/iKHdpWO\nk4Be\r\n=5Pr8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeL7Fg8bMGirfI1JIjTow0OveaQSIYaQwdrdK4GqiP5wIhAIdMzL5t/NwCVX0vN56VmLZwNLHkAmlx0Ld6vnLm3uwk"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0-canary.3f64270c.0_1607032233142_0.6252481917900583"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d893b14a.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.d893b14a.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=9.0.0-canary.1c156d69d.0","@material/menu-surface":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"0.21.0-canary.d893b14a.0","@material/mwc-list":"0.21.0-canary.d893b14a.0","@material/shape":"=9.0.0-canary.1c156d69d.0","@material/theme":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"d85f7378e0640c2cfbe4f96436e664222a4c2571","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.d893b14a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-zA/4jDDAkRnU0Q8kHhwFtbTdiSDL97x/3eL66clam7qx5YgE+g3WbWmOzA2vxe1GaA3ZSMMBU+HclesS0yDYUA==","shasum":"a4d0823a5b3770ea7c7672285258398a41adfded","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.d893b14a.0.tgz","fileCount":23,"unpackedSize":112754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWYjCRA9TVsSAnZWagAA5vIP/3oOzO2QtB0DC6fCMs6R\nCDi0SLvEiOESwTWyHf5XZotXZynBpccsZBJ4Zjsd8qdMV93oxYNLW1vS5kNB\nILdIg1Nr7RiB2jERLGt2hNZ2/HVUtrtw1uFOlsA0Z7Sbi1qEXjrm3r9q0PyF\nV4ijtmFmzEupkElyMEmKGjrIbUco4H4Lz90vo6NU7sOkA+Kl0n2DVka8OOOa\nu8S/Ge8xF6X1DMsbg9ZfSQ1zOBbvx8W5ZkdFuS09j8a7GVODuBYZFGdO7I1Q\n4Kvgp83oJJwbiG6d3K6SCL/2CTNc+fwL0JdXz1jXTZVkgmG6pUyv3tqokIQk\nt7x0HUn9n2LUR1xaGnje3UoYetNqmGbjIiG7tITr4xKzqsCCgJkzaYP3B1As\nXZMtMzSmEhujK6ipHTohmNW/b9oS9ZcwFRlsGJP2YFj69rlPLtTadC2ZB1J9\nPaQxrOD+sQUT/6A1KySCi2HXVLJVZdYG3AXybgQvdGprQjq/kNV7gwnircGF\nDsn2GlfLintPHGT7Kpjsxnfg3uhjACKnQKwjltw9o5cj1ZYjVZEmiNtGsd52\nipBv8uTdF/2HNSF+975OK2i0EnZSAUP+8qPn+n1IBFpe14cGdZYKcA8L7eVe\npWzi+RlknQIIF6dTFzw2XVZrhJClQ67c9W9cbMdk5HNnQC6CiC2cGf5vF3M3\na8CM\r\n=/UEm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHrwEaC0BJzeZxoFhi1EgO1/Xa11lLTZh7zw1pbFGV9gIgdmbLAgDkrsdG29BUqt3xmm2wTY8t7gBRcUDLRh2jZuA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.d893b14a.0_1607034402785_0.4768754434624398"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0":{"name":"@material/mwc-menu","version":"0.20.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=9.0.0-canary.1c156d69d.0","@material/menu-surface":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"^0.20.0","@material/mwc-list":"^0.20.0","@material/shape":"=9.0.0-canary.1c156d69d.0","@material/theme":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"d893b14a0846777b90c10839f3d05c36bc34692e","_id":"@material/mwc-menu@0.20.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.22.1/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-slSY3LORaP8MniXoNvvulvptQ3Ohjit13xiFWVWRr63H3YxnNdBqWW6BICASNJWNV/5y8UM1CE2Xw99UEnG9JQ==","shasum":"672d6a4b40975b8101029be3b526aa014a252957","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.20.0.tgz","fileCount":23,"unpackedSize":112702,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWa1CRA9TVsSAnZWagAAgkgP/RCJbUyaUh16H3sQm6Tw\nDdV+az/dJ0h6LZ7YAWLXHqG4ljY6G6Nc2ome4UPkYcnvCULH6OdNa/hiXU+F\n9zjZ0JlIvvQhxeuZ7xH0Ex35Jj/r9IFc1S9mOeRNu1q5FmiptjewJ5jEbx4J\nVcznb4qL+xl0y+FjTPTiwu8Q1aCm2A5KkPtBdCQVsxEvzMVq0lqHgE6T3SfC\nDzrMMr0ayg0zEaA8jWY5DfdWQnppMMhoGDaM9Rn2VyUHOu1HlKdrxsiY5Q0X\n/l9xdMcmw/J9P5J1j8EEujW0vYtP/ti7ny8LSu/fJx1ZabOP5rtW4KkJNtEY\nojAuU88s8LpQ4OsGpKbwsUMu4PLgIspzyFBg3Zg0XlCoL0CvhJVdrQs2iEZ2\nNIzcNdrcVIwE5NRj5eqjsVI4YexQBcg+RxN7hNsGhNRkZ7zzuTFuz7tXWJD2\nDxMl7ry/wYr2gWjEQ4kuFub5jxpuIMwkJvYF+lM1e7Eb3hlmo3olfCZb2dUK\nkNUDX3R65OQ94QfJMxPOhU5bLIOg6ENC6IEdltNwiDe3+XiILLdWGatMQCTE\nb5uleoHpR7UOQWI7vHOKTCfHYy1BMFbkUxFQwDGit6ZNkfO7aZE8KckzjTg/\n23F6VSINCWGLhg07NDZMYOAnH4KlOGCthsCdGbb1HtDd4z98CQ+eMy2qnT72\nq6yG\r\n=lp+G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBlR0Ab6IC9vkwQ2WKfQbZLPOV4M6DR3f9o4jNlJEiiBAiALBUw/bdNtCRqXVEgIWN6T3KpGl3g5lRZp8RAxVBvOnQ=="}]},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.20.0_1607034549074_0.16904225757687175"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.47c7d7e5.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.47c7d7e5.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=9.0.0-canary.1c156d69d.0","@material/menu-surface":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"0.21.0-canary.47c7d7e5.0","@material/mwc-list":"0.21.0-canary.47c7d7e5.0","@material/shape":"=9.0.0-canary.1c156d69d.0","@material/theme":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"670d83aacd771290b76b657bfe6ee631865c037c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.47c7d7e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-9+lN+KmEy9t93QJ1/slVEqje/t6bLr25JsVrHvHqBYNnCf6xcZJ/9PmWbahEGzNmv/kOH+P+ml9hsFrAoV8snw==","shasum":"015965c7cc311a2985d80bbdf82c9d03e9b9e11f","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.47c7d7e5.0.tgz","fileCount":23,"unpackedSize":112754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf088pCRA9TVsSAnZWagAAmAcP/R1V24nX35ubqeJ3bwkv\nMo5x0d2QCk7TQu2AJdgeQPgQ4S+QSosnXM+yb9K9rh8vgufUMJ3hvCl29HaH\nQuTTkfLTuVWHr+R6ATzX+zw/HZG21ZoZjOMB+Y20x+xQNlRlKWO7MVXVShfd\nM030cYoJmVp02L5JLL6/9oqW4EVCi61ek+yhrxdHbYT8f/yK+kZIWd3pQ3NI\nWdV69Mckg2fnJLMt1yIBxWFEK/+Z6cvOY3/KYvRzj3jOTAXK6AZ8wGaOSQ9n\n6QObtE4kJ2AGhpvvTqzN+rMWCorIeUUBylWD4E5OHWtUKHMP+51p6chxPRJV\ns1AVGJebeSMY3ZP8Qf+H3iGV1NKPdk0m72FEZd7KRf7A9zeyS1TwUY1UxitT\npxsp9YEBz3adroNiE7zOA/E7RI7X1xxkGMDFqoXxzsc2dAhXnkKODvcX9w1F\nnW00m2RcG/WuANFVOU+S4P8YAzuqGK9NJCvE4AwqUSnrld67ArW73BTQ38FW\nPyFenRRfRyrA6pWYpD/IEybIxRk3Igty8tds8o/es8Isp3QUZv7GLKIYJKSz\nfqpMITqr1CjB95vTKc02koMY46yajrc4IS9Pd/j8jFmYuBTa7FXHoo2xoDuE\n9DO3xZ7OzweHeBUQ9CcJIBtkRKPL47i0SzXi8hqjIGElfatFlS4fRvBR19zD\ney0d\r\n=nKlg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcQpCbaI2ngkzvjf/HJoKoTf2Iy5aV2W0OfrbWGgMyWAIhAK85tkp21HXBVYRepAdR4ITpEgstVLgNOY3fl6C6aBo6"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.47c7d7e5.0_1607716648764_0.04247686321722233"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b304a78b.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.b304a78b.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=9.0.0-canary.9244508bd.0","@material/menu-surface":"=9.0.0-canary.9244508bd.0","@material/mwc-base":"0.21.0-canary.b304a78b.0","@material/mwc-list":"0.21.0-canary.b304a78b.0","@material/shape":"=9.0.0-canary.9244508bd.0","@material/theme":"=9.0.0-canary.9244508bd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=9.0.0-canary.9244508bd.0"},"publishConfig":{"access":"public"},"gitHead":"44ea71b47f36de83be1e3319efa93b6fd3690c2c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.b304a78b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-HdpjLbskKqRHLiXQmn9FMtRqSpZRKx1m0tliw9/SfyPEt6ySnw7EyC3/2bqNNsETUr3t+qCuGTXDLF9pssOIpA==","shasum":"2fba2e595991457591b2f5d21102e790bece1e10","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.b304a78b.0.tgz","fileCount":23,"unpackedSize":112754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2RbbCRA9TVsSAnZWagAAipQP/RWebknMdeB0vh+R+S3C\nJMRt+ACh4ocoSDNr4ILeWYxJ97W9NtjKq8bD9ri3db9/AamLaj9H72BzlbWz\nEmcXT66QEANwerev2jyL1IXq3/iVAhCJjJhIrw/i79GOCb5Dt1LSPw237hdl\nAgJjkIkd5S6W8v9ZQohC7WCEYgPb9ciTkXHVJ/KaZbASQrGsSTQYXTzeXGx5\nBWk7S2wiHhm+JNeh8X3nCGWEZFxRPZZYitRXxffGgwJFOn5x791Xm4uiEIOV\niClWooM8kUmjDQ+kTGGYBlfDSelqATUMACAfcyuqQWaJRx8VjxqdAzJEVz6+\nsyf9GdjTh6q9VsEgQDPRpzA4edGu8CA23eeLm7WMYXBiIce0zNk9dhNmcCWa\nCZ7IMmOeXa5cD7CBKIKwndvqKshD3myWNdYYDIcQZQY81BjWYXciKyUWEPji\ntIwR9I+iba/mWgNYNl718XxfdfNM+IRVa8GrA3cvos0jGGTI98wfbnW8LFwg\nFgJZly0nRUU++Hc1iz/CDubyxhTu1w2GhKfE69jXWSuoQ26Lna+eBf8ZhcE9\nSWJqGFZu2QfNjTe+649HdKjfhM7OQsMZoAp8J7uSJcI5P6L6MBowWgqtJjsW\n+Aom5ldkxIFLFKYA4JosT8rd3XRAafutTJda/pcPJlzxkSoKxFlYaUoVT9KB\nycJ1\r\n=vKoA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAeDvOWJtP+iyenJ/NbPDoANbJ5ECtkm3Gh95d/WNvQiAiEA7bsktXff8qxarDnsj4L1UisZlhLEkn+GWu7yLQf2F/A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.b304a78b.0_1608062682994_0.6888217884748276"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.777c5fa4.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.777c5fa4.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=9.0.0-canary.9244508bd.0","@material/menu-surface":"=9.0.0-canary.9244508bd.0","@material/mwc-base":"0.21.0-canary.777c5fa4.0","@material/mwc-list":"0.21.0-canary.777c5fa4.0","@material/shape":"=9.0.0-canary.9244508bd.0","@material/theme":"=9.0.0-canary.9244508bd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=9.0.0-canary.9244508bd.0"},"publishConfig":{"access":"public"},"gitHead":"8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.777c5fa4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-RAMi4p3XkCgBBXV4X2Lt4sDNc/9VJeh1c5PihfZEAOBq6g0eN48ukjdY0+GiEwQaGX11hrtr1ZFvJa+1V4LdkA==","shasum":"520ed75d7c39ab464dd7546d018d6f861f92e5ac","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.777c5fa4.0.tgz","fileCount":23,"unpackedSize":112754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2oIgCRA9TVsSAnZWagAABdIP/2BVsKBN2z5GA3W3js4F\nS41ZxVCPK2iA8PlcudrOUn8i3qDmcqd8azZf6y8hWg8SFq6SX8pz6J9tQhQG\nNbCQ/DTqYirz0drdaP9+WZEpwMLLH8XKCDcw0H7pkBCmcy+YLQylvS5vA8ff\nZVNZnSLJFyvTIXNh7KqLcSoRJHV5dSO9MEoX3FWJDmFoPFwAMVvCmvs52OKL\nCrsJnIXHGpJlc3bPYX4qBmd2YmQmEJVsKOHS1mHIvSu9kXMgprE9shYOF7cF\nOtHbNzST36uJKS45qwyRuVEEpsX1umabLkmC/XFgnJ5MZZchI0QXaUwjJuyZ\ny4+1B7mldeRblmRedDCpcX78VOWTICSyequlSBUbCvack6sF55r2kdPXloZ5\ntOs3Kxz4PCIaOBqoXKXxebDdo81Cgvz4qQGvd4e2sjXGLHhMn0uvAdNKIvfP\n5QXTUEVyVg7y1Rm46qf4sxasA8g9JHnDWwbo0hYy2+o0upgYzmtKsQ450L/o\nrUlpzmZCj5Ojpjwu3uvuNPKtKhEtSAupos7Vauzp5W7ZgZ7tfOmNhOo5dc0A\n1IQJqw0fPuvOqlYT1cEBbosJXrJfqH+rWbHDHZ1LsyKB3tLnVmaC3FiU1d3q\ns5K+M50HEKGKZClIY1CYsgk83qy76k0D8TjxY6LX6skrKFwyjarIMj5pUzr3\nBVKY\r\n=jByb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHqyj7YVtKbKIKgLyK3dJgGgre64RVDOHyf2nqRIo1opAiAx2vxtN5d051KqKLAHs6vh9NGey6J6oGfmLlEidvxvtg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.777c5fa4.0_1608155680183_0.05821766553300978"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.635c7996.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.635c7996.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=9.0.0-canary.30fdfd06e.0","@material/menu-surface":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.635c7996.0","@material/mwc-list":"0.21.0-canary.635c7996.0","@material/shape":"=9.0.0-canary.30fdfd06e.0","@material/theme":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"a0b572136cec769df6b66314ae5710101b643ea1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.635c7996.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-5MFapHtrBgyHcarCNULxXki/m5jKnI/C7o5FuJSKNrtureD8MRgmJWrHrmkQa2I84T0+k/Eq5OWXajCDDZ8/mw==","shasum":"ee210dc35820085c20f4f6f83b7c2fe517ddea60","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.635c7996.0.tgz","fileCount":23,"unpackedSize":112754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+qbCRA9TVsSAnZWagAAxKUQAIgOuaIpPf6BJWjgWyf+\nPgrYGBWD1g+6o35UxfsbmbrCQE1+jg+G5Sd5pWfIpKMZwASoW7mfI1JNPO9V\ne/OO5yU5ka+2ObHYPzChBJ+tAdGNcWoPywX5IBTwZzrgon+WAXJ8l9akj24X\nby+SMKNfHNpLIYsqety++FA0J3MBVsyZC4NkhpoE5Ws5M1n6L2g0LhH6UrUM\nN/ZTHud653sUdkK9A3Dk1rbw4ShBDEmBeXoBvJjA2mg1Nstb1TCOnAqdW7Xt\nOGJ0LCyBJIWg5MYRRETs+Jopt489694ofJNxmtylniphWQ+lS61iMk91YGWo\np7vkDScAK0jVpZfUBW3Qvo9eulZDn+aTaHlfQi08uP3MRwTTaHprRh/z/uCi\n5FoMYhvrdvsAiQH49II+BPS8W9NO46qKuAdk57eYVlUZWv7SydX9PvawXiDG\neytWBThHsSFyudC/T8x8y6BIBgqRZgu5fPkYi1Rci3mkyhA+7LdgMRA5RY+b\n7WuQGd/dFAgwxzT7J5JD6O8M51aKjCepB0ufqfCz3Z9gWKbk0XLl4vBlXFjE\nr8J0di3bZ0MnOP0qI/29j04kXFsqS3JzOuT96mI00HGqR7o2rkyl80rQG2Ml\n/gZ4rx4ROU8kgsauDa0Vg78AUVl4IsKU1IEMVpUyKWq4rvpUwQaqiIWjJOpE\nH0dY\r\n=qTDw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDuf3GbYcSE2qrWul/YbkCwKG7svm9HLsCkgsXowRSp/AIgeNak/mFxl49jA1GXYOw37s3+rE8OPK/jtLu6105Zd5s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.635c7996.0_1608247962717_0.8962682445993664"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.20b0045f.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.20b0045f.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=9.0.0-canary.30fdfd06e.0","@material/menu-surface":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.20b0045f.0","@material/mwc-list":"0.21.0-canary.20b0045f.0","@material/shape":"=9.0.0-canary.30fdfd06e.0","@material/theme":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"a6bca4682b5b0bc23e8311853608b98f5594831a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.20b0045f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-BHt0VpK21CSmupTDu2pH95wtl4UthVTx9uYlAXaPGr3xIWEH/vQL4VqQDcKCC9hAMEUd3N4tovUa+37zz+uUsA==","shasum":"a0101868470e20f39db2f65d0340ae7899edc0c3","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.20b0045f.0.tgz","fileCount":23,"unpackedSize":112754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+6OCRA9TVsSAnZWagAAvrwP/1s0KFCi1oLQlMNPBtPd\nRi1/Gzmp0oieuGcdjzejEPKtk5C+At2KLrxmO2P566lLcDRsRCDO2GmBjnIM\nWpwkevL9l9bSAf+363LpRCbY92RA8KgeEmAjQ2EfjVbmCn1CavyiYHaty2dB\nlP2mF2QL1aa6mxKqc7yfes7XRrMUr4vyfboojw+TXql09joSwF3FPF6nCXMt\n1W6F5zCsClbuTckIwAcaP6NN/k6xF6GQCYF5sAL3o16zZUTi+6cni5gyuapI\nBZnsoFwlxVKGDilU03mpto8kqYHb0tIYneoE/N1xQk5XXUTyAc94FEARmNBm\nPfKZr1LoSajBTBitfa2lZfuBV5qyNrGi6LCe/tdw2tmOAs7Zv4FfJOmOGLxs\n8hTcwloCtWhQeD2up2lggFZyEiFQxK+7891GMcqxHan2ulbbml2oUnRTPWQM\nsARtj+FSwmqGxXcNsEZS+wYKTlwcQ+Mw24YM0pt+L/XIbh6UAeGrDVyrR43m\nn/srBzjAjGBA+CHPJ2dMNuw59Ju2s0uFFTOmOPP7LDCzh+xq49xWgulssCJp\n6seVCY4oX5+iSjY9V1y24+cVoL+yvga8mqFLeKnkTsYSvuV5A7HI3Hxjy5sz\ni1C0IGNqNFsuAm2pJgeiyfyRiEeyfa1jwPWDEtvondfXtPbLpfiie0WblhMh\nTn0f\r\n=bxLH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAalQAc9S5Vc+d0bTJXTGm/a7NtZdmJUvm44+2OZAziLAiBsezGhs4bxBTsaegXuDAYHCTmjLTQajcxKsJgcwhbotQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.20b0045f.0_1608248973914_0.6683835944441889"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.41f77000.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.41f77000.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=9.0.0-canary.30fdfd06e.0","@material/menu-surface":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.41f77000.0","@material/mwc-list":"0.21.0-canary.41f77000.0","@material/shape":"=9.0.0-canary.30fdfd06e.0","@material/theme":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"59ffc250e9e7d85ede63c75495b12e981e365677","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.41f77000.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-EMPcjULHEgheXSnDOXJdI3ahduKF4Lb/ypfwA/BNta6whGncG2pg9O0M3CF+00wM9d2uhuIbG2YT00U1XoyFvA==","shasum":"ff4a695a30a3bd1e73cf4d7c413f8947cff83221","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.41f77000.0.tgz","fileCount":23,"unpackedSize":112754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2/lrCRA9TVsSAnZWagAA15QP/iyVQvi4ZLLF5IXG7T7c\nWwIl9UgsHBCrNQrN80TZozdjLubr40HC1SrF1ZNbCO7KVnJIngXGsSnOzUlC\nXAW49RvlQB+ZuXn5FFrDc+xqIWcm9ZVCIGbnH5rVkNx4rDmIhpWe5vwU8dNt\n17Gqt/LJ5dVj24nK/K/F/QH3QwJNlm346jm8qYtcfeOrY0AyS0y6c+0gutjw\nc19zwMfYHgGSppG0HQy7VjalG0ic9ztaK40BkJtTKrooqpS7pHxDyyG2WF9x\nq32eTKOxEJGsgR3I3eRBd07wnJLwNhtij+NLb3PDOZgJHqIHtZNIR75hqWCb\nZLo1pQAitRhc3OinTee5sLFN50k3HKVP1fW3II9GhQzsHdMLPfb54eUoYeyH\nzMFr6BzcrirRq+HdOdAJDpq5L46WrblSJMdGu2yi8KCghl9n3oCqh18ludSY\nL7bcHJuggrdAykNjsM0V9hQP0xBLBJedbu7VqlNHR59HU86322BOqCACUl7b\naW88L2LFj+NWxqTEYmnwecWM/swCm1SJVl+LQDlb7MZ4Dmemu19TZbcoFdDm\n6BlOFvnlS4kVR14+w9Hf7xw13oCSeiX0kh7xYy7i1WaRYwbmiy3s6ovLL/d2\njsUquaWPVR5vSOVIDW56t7tNxx9WIz47qpXsTJfAcTd/WfWidD56iTO+U54L\njT84\r\n=ZMjq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCR1dvMIxpIF4elHHzJG6uDyzSBTs2YXV2UMnWDD5JPIQIhAKDunn659vyEX5hXfxo2+jeyJ4CXkmLkwIOmZG2Rfdz/"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.41f77000.0_1608251754750_0.09640671671238854"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.afe4079a.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.afe4079a.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=9.0.0-canary.30fdfd06e.0","@material/menu-surface":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.afe4079a.0","@material/mwc-list":"0.21.0-canary.afe4079a.0","@material/shape":"=9.0.0-canary.30fdfd06e.0","@material/theme":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"aeb3539e673debaa2381e0aa7f186b95e91ee563","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.afe4079a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Eyy3+3zWsxvYyNu1IV55b6GTaBkcPu2vxnpJZpNqj7NWAbBcF0o+31CPtCrWnK03Ap1Gko6sCTkwVti6ZuDRRA==","shasum":"fee3ffd20924e641f0959fa0b032acaa7cb6e54b","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.afe4079a.0.tgz","fileCount":23,"unpackedSize":112754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4i+JCRA9TVsSAnZWagAAywMQAIPUhPbr8++KPiaGyYbi\nxzKD4kzJkJRtBig0IpDifZ0wGwxkKUDaj9gGUmdh+yrUlc45Xm/ey8bEhfhV\nzQ6H23yoGpSwZ+mzhlJU3RRgfoGt/3SX9FuzYwWrrXjmLPLTHWUwSVBKuKyO\ngCAUgpmHjV44Asg5Kz6Ec1TE3FUGEc8bKcmb0dCmPrCPdrFW08idNcxeHCyC\nW7L4zZbjHntuo6FS/mvyxEKFiQBIJKZyPfWeBZmO2rm8C26M0oqvvewm7sy9\nOyrzbpYhKTLeNs1zfPw9JyRDAT41DUNbW+yGrp3vsjluK8eY6D7g2/oizgH2\nr5kcBJ0e6D/FxW1iSgGmwgEF6PMEBxBXJFfnMonE5HVp6+Cc9a4H7v6e3mDT\nwOhvdq4KgmJp8T+g0SJ3TgETZTPKoDz5rTLzBfyPS5LdGyYStuyS1xQYlNo0\npHCZumd/Vs/hcoLMYqKUmkAEci5+2lGja35V4HEbgbncJGlwcD965zjupbLj\nhC7VC5op0VaNMQQquZSj23URp9smCu5nffQobvETzdnDnT218xJSUaSz3CNn\noLJS2x5VMMxPDvJ1lBIm3BIWn7VjbFnVi1xGz2ShjLGeERcfcBlJb/fBih53\nZwmY0GExui6CrHRHKIHKvp+niZXibE2auuLkSMGWZhJDMVNUHVXV9OgRg64t\ne99s\r\n=O3TU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDX5ntcZtnv0ZMLfkzHZBYtBUkjRE0B00wsk9boQyg1/AiEAlDHvTzp51v10U5D/18zigk6HdjYliIJSU5XxHIyHB90="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.afe4079a.0_1608658824913_0.10066713146104478"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.407ef8f9.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.407ef8f9.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=10.0.0-canary.671d72d95.0","@material/menu-surface":"=10.0.0-canary.671d72d95.0","@material/mwc-base":"0.21.0-canary.407ef8f9.0","@material/mwc-list":"0.21.0-canary.407ef8f9.0","@material/shape":"=10.0.0-canary.671d72d95.0","@material/theme":"=10.0.0-canary.671d72d95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=10.0.0-canary.671d72d95.0"},"publishConfig":{"access":"public"},"gitHead":"b600a06f2f54a052373cbcc038980333a8068672","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.407ef8f9.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-omxxZ4qkbi46owWLLHpEI26blLPXL6CB5Vy80WIIhO1RoEWI6S3T0CPy0otJxUSTUVVA/n1U0J5ELyErfjmHtw==","shasum":"b2a78253f0e7ee6b5b1939696228c57f9bd37566","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.407ef8f9.0.tgz","fileCount":23,"unpackedSize":112759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7Qc1CRA9TVsSAnZWagAAcpMP/2yPHRzaXNq0Y47DLo0p\nPqbEJEXD0Vdgszx1KfbQ/jKQC+3HuUD7tq+30dNqlxlusV0ShQlNBi7VouLr\nwt5wVNfyOWQyDIHrpoUFlfVhcm6O4m7y4pSXuVbh26qczpQAapplUHx9Yx0w\nVMEeQirFTppZtVHrx/NF/RFIHLSC55LYGpEciGxL5zgWCmU+iwZOhKU8SraV\nEd3as5B26Tv5AUEibAjrMmHDJzB3rNf2Iljiv7pBcWsGNxqY0tM2ta+xY2dM\n9495affc1L65mvGnW1xwsecG613rYenNid/PKnRwCmRbQoDQDZVDhtld8JWV\nXWn1dy/c51Y1fXRX6X8Cj/zHPjkqvqjbaGLFgky5PjTYT+VffPyxIJl+fpS2\ncYxXOvXSTbYEL19IqzCYF0Jn4vErNNo+srReSoNSauoww/rM/ItpKMJDTwXr\nHTVp2Qscp3MnDRcrZUmPhwkYJaXByZ9O6Hny3W/nOH5tLL39knhebIxdQzw9\ne3jpB6BYQovYTdreRInQ7OtbahA4Rcn7O5p9JjlfYDWcbecbq5kscQEnM4/S\nI+s8eT1JH4hGN5LV51xZUkmTaGJAHAGfwx+IBdSaE9N5LMCv1vQDZ2khbSRA\nxRw/CbXyKVyopeHdG95+Ebwr2kSjQu1CQHSe19M9pDMK7hzNvjvzveYlc4CY\n1d5d\r\n=dMy3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAdYO3abBO+uKQCKPfBbEeDeQxMGAmkUuMn9tlWX/+FTAiEAxqlnjQAcwpPIKELmhLQwtdBojsUU3SXw/HhBntTcrlo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.407ef8f9.0_1609369397082_0.6517372014806508"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e26e137.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.2e26e137.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=10.0.0-canary.365c69360.0","@material/menu-surface":"=10.0.0-canary.365c69360.0","@material/mwc-base":"0.21.0-canary.2e26e137.0","@material/mwc-list":"0.21.0-canary.2e26e137.0","@material/shape":"=10.0.0-canary.365c69360.0","@material/theme":"=10.0.0-canary.365c69360.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=10.0.0-canary.365c69360.0"},"publishConfig":{"access":"public"},"gitHead":"cd3d92f8ebc04ae6cd6d286c7983e3028e380428","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.2e26e137.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-SJA9T9CJrW+TPKWYTodAS+KYItohbKFOhUBi3/1YnfEixpOEFh3V73p756/z+LUbqpH5OrIjwOSY+QIVCJrCWw==","shasum":"1fddcf6ebbd343802d688b6e4dbded3ea4e6a3e6","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.2e26e137.0.tgz","fileCount":23,"unpackedSize":112759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9LToCRA9TVsSAnZWagAAfeMP/1jZQuWJ3YWFYuRsf82v\nlZy0DQz+krVaZfk8sW2N6kYPKu5NCZNHOgYRHBjNsMHUDGGnVWjl5fz9ZaWy\nqBpg/BaRIX0t2F2BfsvY1UN00tJ2OXJcoO0d00aWxdpn0l/rj5sgJfoU+e9N\n8/3OkIT34dZQnmA6WmHgAhlakvb6ILm09JJopmV6O5RrJ07breNeQyXoH2KC\n9Tqn3ZJ+tLX/YKLqwkWm3amxdMv77eSC59e4j324HPQT5qrTomHR74ucv2UX\n8S2yOnUUxILEhDUsQV3i1ouv/TCfvrtKNdE01ze5poNcVLUt8OaqqB8qFzHC\nnt47f2COvNnER2rUgyqvHqviqdvaxnoVd+niv8xBygu8aszgbqD422PdGbIA\nLNobAZVEF5K0IfAbgp4eqXP8W9rIrLnsEfN+C+jHEF+2lRT/SzfNUSv74nAF\nc5PjXEfdGXNg9E87TlwnxqZ39JHsA00nWYxwokfBW5rhXdxhU7oX78T/JuQi\nq1Ilxa9u3wSDcFz5ywy7gODSQe+2CcTQGDPbdeJNEIlMV3oDbwTN9jrlfA8W\nsxRtTHy1IOyUFDiySS7O2TgeqfKIuKrq2wDUcLnNW95R5IqLHEVYPyRP1Xyb\nxVh9XIW2P7vEuRh33FbLlc0xZExXGp1YEKZBQ4FdwEhZHmhg0Hrhh5ivt6Xt\nBR6Q\r\n=TgdR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDY1+Nh9Hj75ZAH7rG4QT9xKrzsiq8wFwfF1XUuUBabhAiA+vguJpFzG5s+IOLY3xRNyhwF6jWBWdyNhuIln7iDsWw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.2e26e137.0_1609872616034_0.931191969541816"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9009f6c1.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.9009f6c1.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=10.0.0-canary.abdd10065.0","@material/menu-surface":"=10.0.0-canary.abdd10065.0","@material/mwc-base":"0.21.0-canary.9009f6c1.0","@material/mwc-list":"0.21.0-canary.9009f6c1.0","@material/shape":"=10.0.0-canary.abdd10065.0","@material/theme":"=10.0.0-canary.abdd10065.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=10.0.0-canary.abdd10065.0"},"publishConfig":{"access":"public"},"gitHead":"d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.9009f6c1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-biuCrD4qvPXG5oqPVFCVGPPhyxTHZKAEkM/H6tWUNwuV3F2XnAPUifBVCyLY39gyQAwcDNHBPGwBWKprvWbP2w==","shasum":"2932ec68763e7d13fde9e4ed249bc57ed8c9e994","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.9009f6c1.0.tgz","fileCount":23,"unpackedSize":112759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+LiSCRA9TVsSAnZWagAAXrcP+QAFciHjddNjNJP5KUFp\nLdnoIkBlO3dhN4mVVgGU2VqIKkG6XRUsoNOFXmXgUkUFWcHRbcGTaeMnzC4T\n+SooVd3z/eVSfr6e6na9D1X91SMlZ9OZfZ3XNffW+k3vB+eOu5KXB3eHFk/n\nwUUEZR6+DoVUZW6h25xRauvQV91cbOsp96u+solxLjyz3gVAM17SxEKSMhRn\nCG9qscoUVBBq+XalfTtrch2Svaa0Fdhmltv6KnPbRMpKaSyaSwqhlGZZGHko\nWgRh8GPeqP2Qm2mIQwqgk4cj7q0MZznDVp1lLrWeX05Y/HtnyWyFshtlH5h6\nz7ynrLGG7MiHliNmsfWMWbTKewrENqOHNxUF0sw56C9wXqRZcH3/sf6Vzz+9\n1dBzjWzvDqiRcTbqpPLZ0BXbDUGPWsqlcSlDZV38svPx+vuYRHRPODZeXDZT\n5fPsJvP3sqxNVK+nQswPhDrPYWDKllQU8oDINyEmbz9fWbxZOvCTcCoxUmza\n7L3cABhzFuKrEZSH3pQSzEuE5N5lG4iUpBbCK3gVKVgZe7iBoyL8CXRIy1yU\nqA22BEgRWTZ1d+lwkdAaM4wQcs3b8uXFDkAVtOoNp+H3+oWOWGCvP0jtCVXT\nuFUvvehkQ9ewK4oGhG8LktzSSyo+W18GIcncISw+hr4g/6yQ5JdXDvN/Jnnq\noE4j\r\n=dTRe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFXek6W1MtHP5kRMq1VcuInqm76R0hW97+4TLL1mtw+gIhAOCyUzrXyAE89fh0y9VTJ1XxvSwBV7ccYcYVEnVooEZR"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.9009f6c1.0_1610135698154_0.8324816139298654"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ee99b646.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.ee99b646.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=10.0.0-canary.b8a1a58e4.0","@material/menu-surface":"=10.0.0-canary.b8a1a58e4.0","@material/mwc-base":"0.21.0-canary.ee99b646.0","@material/mwc-list":"0.21.0-canary.ee99b646.0","@material/shape":"=10.0.0-canary.b8a1a58e4.0","@material/theme":"=10.0.0-canary.b8a1a58e4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=10.0.0-canary.b8a1a58e4.0"},"publishConfig":{"access":"public"},"gitHead":"e3bf8197782f6099f32f339bdbc9218093828cdf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.ee99b646.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-aq/qbPFKW/xdfw81ET7h5eY7c/GUgtRmHp6jZqwvFDZSCN242PqQLzkeDHuOlwrbWTrGL193L8JsgVDEwiPk3Q==","shasum":"0495268de47881dff69ebc93b48ccd639866e70d","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.ee99b646.0.tgz","fileCount":23,"unpackedSize":112759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/NqECRA9TVsSAnZWagAA5FIP/i9b4Yeez3gNCjLdK/9/\nA/cKfCniDBHKch8RiXk9NgBkLDerwRv0IU+KTNCqR9p4oFZcUWpfbZHmWWX5\nWuls+XLwSas76uuXfLPBQ0dlyE6iEEvXLRSO/zlWgILhBpI598iR78vR4tsY\nn/gPGkwPgUxoZpQQG+Wu8nT1yV2Pxr2nBWcXfcdP/rDC8JwK5GyDJL/QbNyf\nu9Tsme8XYPfXR5GPDnuOnxLJa9A9woBLRSqDffJwqToMjnVazhlbWtZWwPdA\nABb0cC5qV7KvvfmtmYkPRcIq6en0uUmcAeM9NZmVRP8X5DQJRLquD8vCH2SL\nSDg4HOxKlegmFy6qON5vrlYQ+ddUMFZPvkp8DAObILW8aqJPV4uXHys7ucVx\nSF6w2XswRtMKNbF4/2s0d1bvv6BqpPY34tWtQfJwpeXXNl28unUPOFC2Doug\nDKnITBe8AT/idZZb1Gi4qebX+t+xtNhk4541KfRqznAI3dHY3QHMxr6A+tUm\n2Jj8kTHKaX+gfSuMPDIafZOQFGDvBAI/BzUAhkeTYJvlUB4H1Zkrw5ARBWGB\nn38UxYjpwLGrQ231IFI2tEDrHs6biOTHXJzYeBrT+9MjjblX4na/FsvR/uPr\nBSpWr+nLm93rnj555eVSXz9lSIWheKx9u4Cp5om7trfVzVgIkq8fRfTebZyi\nPU3w\r\n=CvcL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG4n7uKEgq02JoWGO+sBwt4SyIPFOfbFg0MUMmoS1ABDAiApHPSnwvcF8FzS1MGwWNZY+FuG36AILkYwG35jkc1aJA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.ee99b646.0_1610406531638_0.4673093395534902"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.740ed33b.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.740ed33b.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=10.0.0-canary.7584267ff.0","@material/menu-surface":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.740ed33b.0","@material/mwc-list":"0.21.0-canary.740ed33b.0","@material/shape":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"fabdf055e5efb9cfb69ee02c46f968eb33e417e2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.740ed33b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-dj1Wm78NBGk8CkBdY4sGDrQbQhoDZ/+DM7FvKC0Ye6YwI4+fyd8ZZ0loH8hHCC3XEwVWE2YJ3GPV14qQ2p/CLg==","shasum":"90e3fd975a5c282dfa40c92dfe4dc235909de1f6","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.740ed33b.0.tgz","fileCount":23,"unpackedSize":112759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/eS7CRA9TVsSAnZWagAAQ80QAIKkNYrL5a58+4z1Pa+Z\nMbbbdqaM+ZF1oTQ8AyKv228CbqHA//BhJZ+xgvhd0ns7MF24f5bBRxK1QHjK\nX3mE9/JgXjsD1GLvzCQbPuPRb1ZmCaIc6mJCIk43p5a3MttbAPxAW4mNtHJS\n+htLiR0YkxmBItA4GnCOpoblx1/Dt7ARVZPRNVRnlrFgCdH33jbY/QPc6PSm\nM055ZtV24zrpvB3m+5W+N1g0pwsmGN2f6k0p1p3QQZdXEArhcN1MdoyXDCI7\n5HUv9kcVNCu9C6wEIMeWFxZwOYzuRbHAR+HdjApznJERlGHo8CPENeMIdNWh\nbNTsy25BUk99XR6HyoaM2O19kXyV9IEGFjJL7bp6m0Ba/+GcqmdqWCbnvIS/\nYf9dbh4UoqC7GRIPVXjg6A9YaK31kFZCNakMpF85J6g5vJNkNeqr/e+VM563\nSwoOiLLcmTpjgdZ9DWynjkBP0jw/rn/qzbBoT272fbFCV6ORzJKHC83CjY67\n4u1EHUxrAn/NLNlKsdEd2mswDohPYZeVFs/3rH57WcIIRiCaSs+QXhqMRHO7\niCxBWoKjmVxdf1plyL7vdLNIxedw6zu52iOz3r97ThZFxYS9w7G4p4jb5ZJP\nVUs8PSvDvkdktVvP4b3I+tnhTlX67nFEjUkRpTrseToIdiAUbKDiE09gb8s2\nX4Ch\r\n=YLDt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmr6CoO9zeokInpVHTLfjKBdVad0kbfrCOlURPFquC7QIhAN+X+BSWgK4Yo5LbuyadaPI4eBCyfdBNqSucGlNYWeJz"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.740ed33b.0_1610474682156_0.9826516944717847"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5c541b1.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.c5c541b1.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=10.0.0-canary.7584267ff.0","@material/menu-surface":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.c5c541b1.0","@material/mwc-list":"0.21.0-canary.c5c541b1.0","@material/shape":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.c5c541b1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-b0I/P3wbGBWauc1rBoTpT5xo7TyUBWbb1UTK04EWh8fUYf8dJ+ZbM+mx25wK/WogxP24nCJElEVCiApC8tWnpw==","shasum":"9e8f59430289b7727a7237431fbcc98084c0b39f","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.c5c541b1.0.tgz","fileCount":23,"unpackedSize":112759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/e56CRA9TVsSAnZWagAAyy4QAIoyRly4maaYWT7K6Oq7\nKSPcp7cE8cotlqBSPKjjbfNbJYkpzp5+YrTQJRS2lIa7OYbvzBdseuJXy9Re\n7W8QjX64If26huhCHCzBJ26HJqNtRJc//+OmlYEXNZ2G/u5qtptwITX5yqR6\np5cj2tBM3+vP9fojAXGJkPFmozetyHxUj0X9KenKB/NkFXsMrHd+UHg5GXMl\nMiBuzlnjvUWU9xeYEAGVE/LR9pHE9sNfZnzeON+U3WlUfWRtJNKyIDi3V8nc\ni3xFXY3fRuCy5M5M2Ap1UQJyZhINU2uayjf03XM0WU2+DrNOTOeGkTZDv+9V\n3LgBiAwNr2GfFTtAfdDCH/nwkGOvXyLLPlHap2e0PBqTF8s8ouL6wXjCEJmx\nttB4bmGuwubwUt1Cef3O2oxjc+qN/OvrgNYNVSf8jtLKgBGHvvKUDbV/fMUD\n4D77qtp7SerBNH78nH3N5k6WekDz8UfUCsv7bcgAOTveRoVXVzfbMljAL9dS\npC2loCLd1PpZt5T8QxHaT7BSWLgshwtvKycJqDztkhnZ1p6D8wuqjVgH/Ria\ni3BnykVUrLS7GiE6M5VqpUaDDDiaKVBYQPOBbCXTZQtpkIwHhsloqPO07DwD\nJD1PoVl3fiR72yXWciU7kf0a8q0ECQaZuB7lXNOPsVcrX4tfd5iy6bx6NN2V\ngTgr\r\n=jR5u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAiQvWm+5eArIQQPtvAFFALFbj5lc+l35I2d8Qr9mCxqAiEA75jj4xw6EkJxFOqv8J+b6eNcv2bwzkj3z1S7qnssl/E="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.c5c541b1.0_1610477178119_0.5053006254486845"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.06fe9d90.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.06fe9d90.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=10.0.0-canary.7584267ff.0","@material/menu-surface":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.06fe9d90.0","@material/mwc-list":"0.21.0-canary.06fe9d90.0","@material/shape":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"99a3aeb2c1659185c9597a59e5dc7599bbfd52bd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.06fe9d90.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-WKHANeTGrQyiACIF1tJgjIpImsRLKE/rlGiL4hIJHxz3bzutvSRMTdjKrbL03nvyVBMJsvMdMXhGSDVLylUvKg==","shasum":"f87f3c72192fe3835c99249600f0d61f78086706","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.06fe9d90.0.tgz","fileCount":23,"unpackedSize":112759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/gzLCRA9TVsSAnZWagAAkbIP/i59Eten+rXLd4t/6ojv\n60pItjrTHbFe4+KPthGQ8esjQlewlnQH5X4n7IVKg5XMtDYj/Jtx8PWedyQf\neEVERgWGSEzdDptIHQcGCmg+9uIl/hcMfXL2eHWFuv7CTe+0CFq8XTkzIRyr\nB8vHZbn8bFBkRTR8/KHihlcS8y2YEFR5aKtjrPji/EFFAC+WPchTmA5/yKAl\nW2cKcqsNuzDCrAMmOMYMLdezzf9FvMSqdattSVnHPtvs8n/HlpjhGUcb0bxg\nVvOko0//aazOq2Ym5mm9syQLsbheF2DM/JHZs22wO2m8JV4P5pke6p6Y3dVw\nnPZbjhg+McVo04lgwzro+6phJK4WgVgESkSPmlrUG6UlzKmM2NQdOFxp7xsv\nvk5aYskxN5VKdAedb80oNCNjT71IIG8PmznxFeA0ZGFyDsxbdoNIVT/ERti5\nMhLRB4jcFj4VO2++qFQMlbYdkUNUvBIvLSmuswz4K/bSiH8OLVIpeNdUKlL1\njL0oBJvtEGOgIVZlyhq8fHKn5cJ/k7CfqVdMQ5FsDFSnKj4sELAsnkOdWC4I\nN4RSESVkK+scyL5uWt9F3ANwA302IPyIuWo+WDZx18FQN/llr3/9SLc5OIP2\nPK752iLOehzbfzzM6hgNmdBmwrWxAP8khN0hpWcBYIwl/tcOYN56cQmZ2PcY\n/0AL\r\n=3ebY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF7aoOwPRIrzu6a/XYjZMKAmbey/kmI4Kb6fdGKN85txAiA9i3JFrYuZsi3jXyuDUJnT7pgEenT4nmdd+5oSwG/9dw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.06fe9d90.0_1610484938975_0.7395600460084315"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.269eed01.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.269eed01.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=10.0.0-canary.7584267ff.0","@material/menu-surface":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.269eed01.0","@material/mwc-list":"0.21.0-canary.269eed01.0","@material/shape":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"537a9df54fcb929f413d5ba5af0dacf0e2654c82","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.269eed01.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-kQW5/oNHHUYAU9C7GWmQc/HLk9kT9iU2zCjTcZF1uNTlwT76nXm6TEjm7Yn/7UI1N9hy89mDD3ajrPmgLOpTfQ==","shasum":"0dbcd96fa82785f4e32b678e56a600926aa42328","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.269eed01.0.tgz","fileCount":23,"unpackedSize":112759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/2oaCRA9TVsSAnZWagAA61UP/19qEX9xeOXsEEmpuiJO\nNWED1KOAV0+oAmtWMfE6x6pb9vvMnnFxIZMhvaRhzPkIagxCVzESobS4TuV5\nwvzUWqh0L9lwZ4o2fgbdrKGQ+Vp3nUkMuKBWmiBuepm3tqu1pSUeJeqGozQH\nurFmcQyv85nBjiV9wSjgJSLSTkAEMBFUCJ2/vX2v2oeC0wa1x3v9DJnS3pBS\nnV/PeFNRnxfxNDOg+h9t/GgJLIxTHbj1NTD8Ed05mB6ujqNwHtBfVg9hQ2XO\nqAIHXmifO2a/vqxaUvTTBFaBMkGwFGkHuoK60D7Tsvjb8OYXu/zdQhoMVxfj\neawvMgTujonDwmApRZv06jvNQi/cUhlM7utEIo794ADXt8FfOe+YteS3zHtj\nytVf4liHek0r0rT+IA+rhOUgrm7w+g1ERg2fqQP18G7IiUSn2SuCERNQVJJr\nm0LGOCYdeqsstGwE7BdNaeXodGmHEOzhtrgPZZhcjdBQhruYEvD5sOR/3Z7z\nofd4nbFWps8sfAktwoppkiaXuWz1HDMHdO0v/feTWiurAOzu0OYk7dw45OYh\nrs5G9gt/j+axf66hSQF2ABQ+8Lhj+fvIypinW0GcaYcXdS+gxKZyhzYNbiJZ\n+PC00MflqziOeuuu7NtW457iBnq/7SPYT/ezxHUcfQ44a/mchBimoC5D3xFl\nszDA\r\n=nU/v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZngJdAqVQb9T17gMEVr99aMSGP2tswngpTmugMTsaCAIgVEB427nwgPevGr/c1qH0mUrZgfmtwFf1oHDo0XuSEc0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.269eed01.0_1610574361889_0.12531263468470866"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8c075f35.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.8c075f35.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=10.0.0-canary.7584267ff.0","@material/menu-surface":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.8c075f35.0","@material/mwc-list":"0.21.0-canary.8c075f35.0","@material/shape":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"8757321e04ca4329877d8b8c9924f78bd58ccaab","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.8c075f35.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-1O3Z1uzG6G1uRuX5OX7PdUxHbc/CeWbOe71dP16lAGTy5KePDn1mpyyJ4bnyKFIrINYdoukbaUUOfvysGf2X0g==","shasum":"71e728aa508e93e7464be9a60b1be98428f41f3c","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.8c075f35.0.tgz","fileCount":23,"unpackedSize":112759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/31RCRA9TVsSAnZWagAAr0wP/0WFF8WoTYlCoMQ90cAQ\nBKnyWlsf0bPdGdMQ7tLHV8hrK5kd9q+CPtDCoQaFvVKtZgJ/E4NBRMbTn79P\nleZy6jtMqF3Ii5zxiDq5iVuXWHY0cUlUw5PZ1E31ROLqnnHSzaWE+4GKbHhF\nsORigLgFgyr/MfRPAqxI2GRTwxeePp7iHoAHNf3e2egwakocBtu6Y+jIbe5i\nOnLWKrM0twz4IxzQ407cQXabkxi3kgz2vCTpRRWrLWd8pL9IIK623tredwb1\nymMJmMKe5X8q6tNrE/v+W63WmHmKe6UEFzVlShwha/NmKTNsqcJncnFtXdib\nHkp8WTlv1yXRNzHj+N2+4U3mLYJ16xanlPAKu8IVoZaX1E5RnK8CfQOfCGZg\nrhgoUaROQG5GdENy81q7J7o0evrH6NI6qRC8l+mYPrRLVz1XEc0P7fFmAn+t\nWNlcB3nfOe/peBgDauCbIBnWYwa4rjuqY2l8yd0GfScDOYuAivkh0Lc+7n9J\nu36vo0D2PJjtFH9HR4bta0dAomrhM4RA7Q2rUA98eR3P5pL9W6EdNT9jXyoY\n96nv38gFt6hAprR5wxdEMNQ5uNiDQ4zhBZXOUujMiGohB7zwRmoZiVcXBZQ5\nYi07CW9ddXRZq5Jkka1wIPl6CaWCXxhcacdqquTyak8Tq+bHS/mOaxvY4KB/\nNWZ3\r\n=kO3v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC3ZKGQcA9ZMVayPUlrzqeP0Ih0V302YYQWDy5pKUl2OAiAPgl+QXOdbpY5YTOquymGqIrA3LsaEpB7GxTw+E2Ej4g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.8c075f35.0_1610579281047_0.002641515406723416"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3cda381b.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.3cda381b.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=10.0.0-canary.7584267ff.0","@material/menu-surface":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.3cda381b.0","@material/mwc-list":"0.21.0-canary.3cda381b.0","@material/shape":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"d660dc72de8b9d23247ab075b6f4f44053c9cb70","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.3cda381b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-6jsYTX88B9fpy/nkFxXvxkludks2X1naZktEJYxY58IarssnMgBAga+ohy7Vm/fGahq9dWuSxQS3room80r0fQ==","shasum":"0e15125fc90c1555410a108ae00cd1a25ba2855e","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.3cda381b.0.tgz","fileCount":23,"unpackedSize":112759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4q5CRA9TVsSAnZWagAAjmcP/1gndgb578WlPjiyk1K0\n2W3W2hD9QREv3HboAaKzpfUuuJs8VXRj2+iE2cYEoEBRrrxpyn1dFQ0jz4ez\nB0fZ4jS6IUOKGa9XZbFkHRSQ2eZJSeCofni8TNdXADaEUACiHADX1DSF7eal\nE8owOP7LBMRxBMaSv27OjsBanMUS/Gq+rrsOp15+Q19hRy9bmIuzDq5xbCnp\nCEVp94hBsqzbT56cmMtC5TQdNVBmZi3GzgkLYP69Y711V/fgRbTje0+LSH1q\nmqtBJGCExINiaFMgEk2cmzAZZJirqJHMJi77FHQyxkAzfdmLlP03zmcOj4zl\nlEvIOqbjf1nZEE8NVFP8/8DhRRwoseZYO8D215mWL6R7+nwRuJyPcf94NksR\nj/EV5uIdbRWaS9xeAaoh5vhUOnBgPponjs9ZWbwDBnxExuDGCF85dmKbxnMm\nEe+oGLlcJyCUWWXJ/LbU+zjvKDbrLF8eWw5clefU8ltdcKjlJc9xe4CeBmjb\nvh8sRoQNPo5bpuZx7JZcabUZZ5sc+4mZ4KHF4rwbgflfPCoyZHrbviH56P1U\nxIwcrs9TI432T8wjN+RvcDQUUUeTzO/x202RJefSqN3Uoqs82tYsJabpc/9U\nUIw+okG6mypyNzRBJ9n/jzCVrMdCi6eNwdFPzdC2RDPjK74Y0lv3aSHwzrXh\nNWgy\r\n=8BDv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0h6zlbNRXcWPPqekMRYHZNlAzwCWyfWLsSUbRoLx+hgIgEnOFeLFadF5iOfRTQVGhdhwk7UCjdrblkUucnwSJ0Pk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.3cda381b.0_1610582713089_0.14421631326230777"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bc113605.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.bc113605.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=10.0.0-canary.772cc1068.0","@material/menu-surface":"=10.0.0-canary.772cc1068.0","@material/mwc-base":"0.21.0-canary.bc113605.0","@material/mwc-list":"0.21.0-canary.bc113605.0","@material/shape":"=10.0.0-canary.772cc1068.0","@material/theme":"=10.0.0-canary.772cc1068.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=10.0.0-canary.772cc1068.0"},"publishConfig":{"access":"public"},"gitHead":"ec7a00c7b7cf2145c971f64e88b375c09a5409af","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.bc113605.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-sE708kjaCWYIl9lZeH9nUklloLuQbBLIbUyOv0KZaE5kYyqr63HZpjM7BNlORUZDAsm5dW/zJIYLWFqSGc0YhA==","shasum":"936748c77d809a826c7f834cf33dca4c6261c3a5","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.bc113605.0.tgz","fileCount":23,"unpackedSize":112759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5RPCRA9TVsSAnZWagAAkukP/ijgxzGRyJJaWGiZbcSC\nRbDWZB/gWEi94JnmMHHFnLxykUI3gAlZik0I2yj5JmOx+h0MS/p3vTMVsY+X\nCzhqyGvCplehBJNXZhqWwYo6MF4A9/+2zyCcJdy66B6BWdrRV4o2ZkFjNCDB\nLQXprSxf7ub4rw8QpX9yqnc9KvhEpD6ewdihwXz+M9wbQQJyGCA4l81cR+wT\n7WhShPCe26wwv/xQSEMiPKoSGJl8vIsxXXNuB26q1yW4BZWCBSezG2a7vi0H\n4Bh+eWjUkuWUgbNUz9nccHxSBZsy0unOEk2UC/ephxmk9nDDeG/omevHvsrf\n4YaPJIMHpses86V69P/q21B3B0+6HgyA/ZvNkCM05tm6vuKtdq+P0N7XnM90\nUSHPlS57gKJIg2guLWR3xhgy8GiUyMpHMyjus/PVdlptZK1yqO8zeU2Xyweq\nHx0tviy356SoouKBuMf+mDy8zNwlrZDrH62ktub9DVPN8QI4keZDqjwGlT/Z\nwW0IRBk0B9GvoGrh8DI6Abi/yqZTSvBOFrG7TXWEgywVYKyILWZ+nInbQl53\nA5I7VTCibcZCqz7yscXF4wUhI0orYKWlMktHgfdd7wsXg7cr2mlEHt+P9mBs\nICqu3AqBosYEQc3maVCb1S3TyCiR3T8ZqIou8Y/IBD/xuDBgWC4Z37plM11H\nBoUR\r\n=vxTi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpm6frTLnDq2Fpna9HMq9XjuOJhEMX9DEhglWC4kqxzgIgRFX4HiEoK1vgTuwgMFrfS3BHPZs5RbeIW/wdUAXG2VM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.bc113605.0_1610585167023_0.9019487701068305"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1d6ff9.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.0c1d6ff9.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=10.0.0-canary.772cc1068.0","@material/menu-surface":"=10.0.0-canary.772cc1068.0","@material/mwc-base":"0.21.0-canary.0c1d6ff9.0","@material/mwc-list":"0.21.0-canary.0c1d6ff9.0","@material/shape":"=10.0.0-canary.772cc1068.0","@material/theme":"=10.0.0-canary.772cc1068.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=10.0.0-canary.772cc1068.0"},"publishConfig":{"access":"public"},"gitHead":"5c7f60619e642de2f6951662670ef490a6e46e70","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.0c1d6ff9.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-3qBNg+0j35H1txKhIjZK/UlQgLGMxuFsLAQJWHSggf/8pEQE5Yn2N6WExZBgxbUGEdzWeT65vTnPX9aReivQuw==","shasum":"6a50dcf4e72df006bbb5fd4e2435461f48ad769f","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.0c1d6ff9.0.tgz","fileCount":23,"unpackedSize":112759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAfaUCRA9TVsSAnZWagAAJzMP/RI51Yk2qPA0Gk/gD9nS\nhw8odCQ7X2bMxF/EGbRZU1aocCALV6tYhfer2DpeaLTdQ2vXwZ3ScRxDmcsT\nbX7TNdw6ng1HKTsry8sqM07ZwzLh8QqMXvGSqXOOtQEaWqNJMLwprrwgD7qO\ndXmW795iNmPTxFNteqy7zyzWrOp22JWLdfcHnJG7n+Io1hfwFBeQnT7e4TSN\nnHIyPN0Z5VZwWDE+q758MNu2REnnf6iLVR/q/rU90LRV45EayRjx1JaG4XTF\nzNJia4wJBtX3HcNBLrmbVC2iW2NbOIYiMUZC8UbDa3sS3r4/QoGtOvEvaU2x\nLByHCjws8qPVwG9Y/SW8UEHF4rA1eHWB3hI3TvC0VOqqhjjR5+oMIPe3xoZE\nDqO7eONkvUFhuD2WyDKd115ZEFf2B5o/m1v7CH4dkoyYZkfBYIDcYUkEcs2B\nZ/+pWxG3iVfP6hA6JKLIlNQXhQAL2h6Dh6fPw4zBs5c80dgVOJMwrV7PS/rH\nZr2GjABbF1UV5FPHdxxRsL2jMBbaQckMEFXTIjNsQHp2+dnlOGzN6EjdBflF\nMn6rSyMAh8Q+St3yw+BErOYxov7BCxdiVq3N+JFLoV7x3p5889+lYQD1r/4h\n3RM1A6xT3qDxDwestV6mVSKDfdeJbN3inzl2/c/U1Ro1Kmrm/iGoZNQxHSz9\nOJtP\r\n=iaLc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFQR4QLsx0XUyp9Z59nCQcMnJ0H5m5nSkywbM1baIGh5AiAp07TEprCL4aB6IdNssCi3UhY8Xo5Hnd98WrbCAayPhA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.0c1d6ff9.0_1610741396581_0.40336398934802675"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b4332e00.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.b4332e00.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=10.0.0-canary.c7c5da28f.0","@material/menu-surface":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.b4332e00.0","@material/mwc-list":"0.21.0-canary.b4332e00.0","@material/shape":"=10.0.0-canary.c7c5da28f.0","@material/theme":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"823027b19badea63e32aa35bfece324daba62e19","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.b4332e00.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-r/0tJ/e1rvGePg9jrUn5wJOP5LvtfLDdxcDFPgkyrMQbxcu1AoVR/j4gjXN9ocm1rO6lXT5SeZHSphjlFXkI+Q==","shasum":"ce018dc4b5b74fd9d68d0547ae33625590d609d4","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.b4332e00.0.tgz","fileCount":23,"unpackedSize":112759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAhJHCRA9TVsSAnZWagAA6CgP/2wuuhPWrMl9n+G8d8SA\nFur4K8oGnTrBZH6QN5IQAGjuA/vOVEKQpIkUCAumPeIk7/W28Yw3WpI9uEvg\nHSzp7JxCtbUmUKaovjwHtNHVD0RuFcSK+UhxFVJjn2Ecpf6oRwp0nh1t2I9J\nC8+DOYcKMb8zDfJKbCtrlzyP8r8LWd1xLISdOiLzyuqXIkOp/Y1KW7BBNUZH\nVG5nzEEPHrD86MfDXwNe/hQwaOy+Q/aEpTYda85hy3H4dtwg5fecANRI9FOu\nVUrhfwYKcPfjL9et/9JWJ+72MgeyEubVwlM4IZn3maF3Y1nNtmEuTE19S0WP\ncVFru1wWJqDVVFslVezQ+MgWTVTgKoKQirupqhEH2XLoBcgYRnaTb2P6lUqE\nyvGYvlwfN/DMZTDUeXS3T7JwhJS9rj0FCUYyiY6g6hIkhqnbt5BGCAz8xoBa\nMwmwUPqQ3wxzau1fRBMoPN7XnMnDpjcjalKbHdFqM47PMRgqJDG4rGNrBKoV\nnEywshKzfwAiOL6uut6Oj+UvEMl16kUCdWtcQZhA/tJcCWwWpmL+kKAP2Fnu\nNvOdP0SRlhWrzb5OT4Iya1b5PQQySjbWuIp7gSAcHVdq9B83r/gfYviI36d2\ni810c1Rpcv+YjYZnsS83Am02Y0iE6hQzl+amC1qCgGuiVHFzmZfcduRXerDy\ndajW\r\n=tDdO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbgatdLlq4789ERwzRUZOxMqRGfCo+3xheGUqSjyMhIgIgbkX+OSmiF2pxCvVK7VWYW7I7FcOfORJBgjVnDiYhAaI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.b4332e00.0_1610748487221_0.3421431090651774"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2899691d.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.2899691d.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=10.0.0-canary.c7c5da28f.0","@material/menu-surface":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.2899691d.0","@material/mwc-list":"0.21.0-canary.2899691d.0","@material/shape":"=10.0.0-canary.c7c5da28f.0","@material/theme":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.2899691d.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-+1qJfcv7Apu632Sh4mXtLeF0vqcmdsrdAqUjRWxhsZnWWfv5KL3sw9uXrOhsgoUBgFloq5/sYGDLBP8bUEVF5w==","shasum":"20d6db4d2c4b76f6cbe0ce768fb591ccc427c1ef","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.2899691d.0.tgz","fileCount":23,"unpackedSize":112759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAkUsCRA9TVsSAnZWagAA7pYP/2Qm6Vt1C+PbPvpziJ/X\nMaq0Tkrud838P2jmCrjhDJLzDD7bXFZJ2nVJh+XORO/ZxonR9FncoLVQdcqr\nd8lBNJp0IJsEZvPxoYMd2YJCGlqVWfVH6yZnFKbCl7uIy1lDahdhjWV2tZmI\nN+hy5XSSr7kA66NLb52H5+6fHrtX6BI/FpZNfaHKWaaggN2+2/hN18g9NOY8\nY556yKV/eJVuvWIjRMBL0vCyA83i0LnYOFLGKQevI1Y7DE5AlkOLnXdBTkd2\nW8Z4oJ+j5P3lKzUl1M4u0ldMGBAZJEhcOH7tq56jZz3A0StvZQVkCuOlK2h0\nBkS8HL6VcvERSZgQ7b+UkH+9LRZNV4Aseymfz0cDGBr+9EtC6dDa1sfm/NXh\nRLIKcR12GDeHhD6zva/dQYcVXSIcOsO7/zq0Am2lp40y9ox3AUtuOFuQ3/c5\njzeq2fhd0EADJS8AHc9OOuWygAB8LsvMC1ZDpdCfaTFFwJ6TIcLSDSZ/i7TK\nffme6Az8hS1pHEzlCdYfjNhSc8+VmmXORkl3xCLgS8WU7btxtC6j5v00CEcw\nY8yVvz8JQpcTok+mseoduGwOPbYnup8M2/4xljxujKaZWWMgcwThIrucFkGI\nNXZmMmwAN/qcy1z4dKDElRkJA1pz35lhY8AOVkoejkiQpOH0DZVKvr4P/DmB\n3d6q\r\n=o4Xf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGbkF/ZHbDx9nBAQsJQHiuEJKy0i8Ttok+NWskRTrPWaAiBf0OsDf2tBB2FBds6gPhJfC/rTl/glH5/YrXWoM86Bcw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.2899691d.0_1610761515608_0.7641836521848722"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.fe73953b.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.fe73953b.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=10.0.0-canary.c7c5da28f.0","@material/menu-surface":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.fe73953b.0","@material/mwc-list":"0.21.0-canary.fe73953b.0","@material/shape":"=10.0.0-canary.c7c5da28f.0","@material/theme":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.fe73953b.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-GJx4Nh+XiAPNCq+DwlqrP/5IjMC0trPnMbaPt5wx2QE2L22VU96klmhPhrwT9+5ZYUg4c3uFHh7t/eb+XlFPWw==","shasum":"dab67f64af6d2bbe38c7712f8ed45d33f9ab3715","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.fe73953b.0.tgz","fileCount":23,"unpackedSize":112759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzFbCRA9TVsSAnZWagAAyJoP/1yXvjfOz4/fKDSHFR2C\n3bZjr7UUOe1EL+XpKCtSblm6ACNqesEtxz0GIAB775cLPhZMErFaKsOoUFBy\nlZ4A4020a0/fWodS+UiBwMlswQAtghQjOBmZH033EynT4CIZ3/XqOCmne+VO\nBSjmp4Y8V1v+/4MT5qt5VwsocYPPwK4NsnZtwCospsvXE73kKNd5/O4odu5c\ngIg0GFasHzzUydtybRyp78qSFVsycqEvywSnow7S04x42gj/D24kika9jvBn\n2jUPjBlPR7Wwqvkvoqu16KkGKpCXpb6/Zz/x/UQ/CbYViRVPPiztU5vdDoon\naNgnB6ocwFC28VonRdd+jvisf3p2rpzy1gFgr7nifx/hRg5HSDAbsWO5/rwF\ng8ZkBkDp+nDRJllWgN4zzVK5Oo8rx0OwIrt87pg9EAWof5jF+ozxZTMXWXxy\nXfkwrjV5TrXslIhmHvp8t5j8A0QdK5PIq2XniHCrHjkWxcjom54xazEcJ8Ld\nsyje6MHGvYz2kklSJTTaT+JDh2bCanKopM3hCFD/ih0563pwfaA+c60mSCWG\nqmx2LKhrxyFhbtICe1FWaxJ8KhdOzP1g3tsv6RUhiyIBD4XrcuN0364Xr7sz\nNdCcwRbRJgx5xmSMi5dydCCr99Z6m6RFNcKjx/mk1wnHU2Sywb8PmTHXThkl\nwtqb\r\n=zaTj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8+6+3Rd8/7xny5u+xaIWj8C2norQFVKaJKJsdoRidewIgaj1jsCeOLq9AK8kOrDAxyCM515WBOD7aFX8YhQLpl80="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.fe73953b.0_1611084123281_0.4718286725257108"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d3a16455.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.d3a16455.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=10.0.0-canary.c7c5da28f.0","@material/menu-surface":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.d3a16455.0","@material/mwc-list":"0.21.0-canary.d3a16455.0","@material/shape":"=10.0.0-canary.c7c5da28f.0","@material/theme":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"cc074ab80b57efe95502e551eb4d0ce6a153094c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.d3a16455.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-PY0J2wXwPEuNjU0XN3Fu0dFUH1CqsE6uNgrjDdWm5cuwpBv6RlUjM5mJ2rxkQIggnQjC6n7lV5YMV0Rj/xLajA==","shasum":"9c50a0b54cd4ec8402522fcdbee0dcdc4666e512","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.d3a16455.0.tgz","fileCount":23,"unpackedSize":112759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBziaCRA9TVsSAnZWagAATJEP/i4eANmbuJd2RKM2a5S7\nF3vSwdLrRq2uoGd2oL9yHVWBp0wiavLoRlmpJltqsXTRh9cYYi3HKLWdQxK0\nn+FNTfrau887H1VdamOx/kPHEuBLj5jo+rWPoKvLJ/MMn2rPqpaJVkYMQjzA\nKdZSKxA1AUfmFbdw2JB4KwP8mmP0kBi12KdmsB+6kOkbC3rKnDvN5lj/Utem\nI6nFM1uxUwN55fPcHc8J4okJ4BumLXKKnK527AB2rvMVlbLLRaKTc54j7k2J\nnx+JuRxnXzgnBtnVQR+76JWppF719fBCjzf1UDCy/f+RAJqwqe0/3v50aOcE\nLMBVj5bAg5qdVXbVo74D+XeD3leFv6P36vSFpZf5UMWxytsUnAy6v9VK7XL5\nZX50Shg+pYgVUELlkbhZ/cwG0ECg0240dQwneP+ZvW2Gh0OBhT76fzuoF2Q/\n0X8v9qV+VIHzSl4u5IfQilvuxW9EPuPETp1Vx2H/3OCbIKci70/RZIL4/b9f\n1KeuM2EcIFj5QNM8/qG3oZRgiMLFrhZ3gCgPMNAMMjbZo/IGZBWU9QBJU/uo\nJnGTwVrz4wMLq3YQ25eu5GsSat6MbUh7wEtvcZ5IrE+fcqYt79pP6L0hl2wL\nznlIQySlJ+ihgAXb/d+SFfbkQ+IzSP0VTwh1CcFmYgPkKX6N2LTvZjoeyAoU\nb2yP\r\n=VQJl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5eDM+dV/MLh1wJkoBI4Wvp4a+5mkX+n4iAIv2DVKlOgIgH2TYTaBpcXitC6+exOdTWB8bo9IYh4hWqggFkKzcsSY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.d3a16455.0_1611085978293_0.13053929273167308"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.597ca1b6.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.597ca1b6.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=10.0.0-canary.b2faa116a.0","@material/menu-surface":"=10.0.0-canary.b2faa116a.0","@material/mwc-base":"0.21.0-canary.597ca1b6.0","@material/mwc-list":"0.21.0-canary.597ca1b6.0","@material/shape":"=10.0.0-canary.b2faa116a.0","@material/theme":"=10.0.0-canary.b2faa116a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=10.0.0-canary.b2faa116a.0"},"publishConfig":{"access":"public"},"gitHead":"2dea4d182145f148cba1edfd7b358ed05bc6c8ea","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.597ca1b6.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-2tvMAQIPkvNnfiG5jBGTqFloDkuOFQfjr3oWNUBa4q7Ea7Sp1GOtPWSvqszAs2R5uICOqUOAvlw/5O4yA756qQ==","shasum":"9d5a111595fd0cbf9236f5cc93391df006b5be07","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.597ca1b6.0.tgz","fileCount":23,"unpackedSize":112759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB4C7CRA9TVsSAnZWagAAeicP/3rjwcp57TsS/TxsSNPj\nrEOe8MLI00TcKsyOSizgoIyYmlFoIFmX1KpQnOaseZhYtMYX40w0gsN537wB\nnLrsCrG/hvOzQ6dhK6RjqTEBDIAAjClvJP3hAKfaqUYj/mDJTJ4XJTBPSriA\nfBzw3dbwG+tP1Q7Yev+xjADioKXd5c+wmleEFBa7pysVbZ44UQG+YujUkSej\nN1MtFSffgktRTM5xOodLiH4SiKsUpLA/wcOovJQ8hAF+nsNkdn49oDIWkh+F\naRX4o8eG3aQPSxmAVxFEaIohf14Qp9Sot43PePPHAYVz8qzUAPLDsr5471bd\n9MXLuiKbovXJKSyg0uzFOUsh240p3iYt08E/lV2Fxu8S5bdpP8i0Ys+6PUm2\nBpsXM80SU2CRpDtLShqiswhB1mBlyGvAYmIrN9k5S5u00yVvYKtVS4JI+IHU\n6uae7LO1RRV1unnBP+8/FZM5D5aZLRFqQx5JMv2A92NjaQ2AN27FcPK9v7+Q\nhUx4lGuYONSkub5KYLEbQlMmuopDczaN9HApYZZvgqBt766Vjz3fJqLNwqAL\nlRDOseAL77lQlvkBte3p9Z5NfU/GFY/F/GVzWwkuirxLFZdJ+i5IEH6RSVys\n96wpOLIoLCgIXiXEPgEDDNFilSQFf76R2GcywbOgx64a4wizskVOPBLQvTOk\n/g1g\r\n=vyW1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNzCFAOOUyeSOnP/LynyFmT33zZbj7gO/Shvh3Jm/2ZAIhANJVe4L9PMjIZLoPgbWQsU3bOch7Y19Mo+/9aNXLZedd"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.597ca1b6.0_1611104443092_0.511641420603568"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3c195efe.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.3c195efe.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=10.0.0-canary.b2faa116a.0","@material/menu-surface":"=10.0.0-canary.b2faa116a.0","@material/mwc-base":"0.21.0-canary.3c195efe.0","@material/mwc-list":"0.21.0-canary.3c195efe.0","@material/shape":"=10.0.0-canary.b2faa116a.0","@material/theme":"=10.0.0-canary.b2faa116a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=10.0.0-canary.b2faa116a.0"},"publishConfig":{"access":"public"},"gitHead":"5832b828afcaa6412dff007228c15a665862a145","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.3c195efe.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-CmE9RZjxxPSSNJjIWjr6NaihV4zaXRWcdo0Nv3GnqCaaP0RMvYPUxPPb1hUo9TLF7QHERsttHJWJ1RtsAZSLHw==","shasum":"9d6644368c6a0d2b7bdb186f1affd691b63aa3f0","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.3c195efe.0.tgz","fileCount":23,"unpackedSize":112759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB48jCRA9TVsSAnZWagAAAOIP/1TID73M4zb+7j0eCHrA\nGMN8IFFe/aHXAYGtY4k/2jt4fienuZw9+AnfjE4wCtrdKYFQ4X8VNOZZTXOk\numGTGV8OZXohRIhTwuKreyUFaEf3UXqRgdCUl0YZuw9rL+wq41Tgj9vhiZsU\niupuDTMfEa/ik+d2WToSSsiJobe3xn8F5tJrV9LapmDvs/KH/zgL/Fwu0j/A\nsS7BeJ4Y3pfHvpUz2RV6oKXc1LmLSW1RlOgVJvr0v9FBqc+4ZV6WqQhPuej4\nujPuhe0fujbXj+k8NnrSAg20q72CCOMd7/+mXEa04zkgi+df8hwYYp0w0P8m\nwwVt3mbJmyQ1nL64f/BhXr/lRJ3F8GhVQFBD3hkEGMO/agOeCCdaP3A+K0xv\nLTfbzx1AOU7hT0frJwz9TZVSXRPBTChiPWHoXhQ3/RB4fRPk7IfktRiQgcls\nBabttwEZMAWwhz87doOoAZjOsomUCm4+w1v3IPUvOsIRjgIkC3JNVKITDsjc\nFdH59oCZJ477oCp3SzKNwfaJA8RgOwXeYaL9VOrJLiMeqmHnUi9VX/X9U2aX\nLPlsXDu1yc3dBi90W7fXOfzFo1jv8PX4WqkjWtccIztjCJV/4hroEVwkwTp0\nQ+yuy2GO2wlTpz7gnhGf2mlVEAT6ulT04hXkETJ7pFvU9wL+vvQgqALsVUmu\neGzm\r\n=bAdJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNO51olFt7SEjevRSHOACOrBcBrTRszL7fGDg5xOuc8gIhAJpEWkkSw+XKE06mEMSlF+0B+o4QG2PDh+jMcm091SAF"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.3c195efe.0_1611108131348_0.02085491850468979"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f7b8755f.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.f7b8755f.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=10.0.0-canary.0c95c9f7b.0","@material/menu-surface":"=10.0.0-canary.0c95c9f7b.0","@material/mwc-base":"0.21.0-canary.f7b8755f.0","@material/mwc-list":"0.21.0-canary.f7b8755f.0","@material/shape":"=10.0.0-canary.0c95c9f7b.0","@material/theme":"=10.0.0-canary.0c95c9f7b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=10.0.0-canary.0c95c9f7b.0"},"publishConfig":{"access":"public"},"gitHead":"189595c9eb20e25a71796a5720374331d50a7f72","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.f7b8755f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-29OQBga2AI8XNDR90L8J+7jlVpImcf+ASMPneXO7oRUtBA4YeYIBGDcnJ+HsYE0cfI3x3hb3Rh3mbaI+W4G08Q==","shasum":"a1a1d94bbca589d54ca30277bdb6ce04d0bf6abd","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.f7b8755f.0.tgz","fileCount":23,"unpackedSize":112759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCJS9CRA9TVsSAnZWagAAKhoP/2doOxOMVens7UfqfRrH\ny3WimIsGt9oBgcpA0tk7XRq+ndN0NqS8nfDg2XugOkp4ff6LCxr/YfBEFE0q\nk0WAsZWewRxgGx/K+Y5IpAKqmm6hFzeSzmCT8WQ0u26PJU8Wp4kJlwgocSWD\nQeOmss/0G67dY6xO3h2k7sbWDfR1qB/vXt4y3VYBEMfdUnL5IjOPfRNpVc+w\nKeSsgNLf8Wkx67sJaCxpidZrafysSjQQtsbZTK+SQaDnIGg1UGnLnXb1r7/A\nQNZM+h+xa+z6NWfFHUzX0PyjJFtKGfgQ5j/KaI3V1lkscrzSbRRbdUfDXITo\nvmju83SH9kBWhedp+D8sVpzD5NGU6M3TshDIZNws04KvJuKkofUbeGWnIv/v\nPOrH3X/yKI9Wv4XyN/WaDDM/QBCMzBHa70Edzu+NPS2NYR0eY1BV/oERvGnj\nUs+C35T0y82aZlVFm6purLYoJ6FHTOEWCFESFtq1fkxcCWLwsKQVRS5t6nAN\nOMn4b4n898Io9R3hqU+JZgWnQHvQxi01Rrpw0wRjmtuXYDnpDJ6NOFXCx1ux\nvj9BB8s+osigc/DAtCLpp0L+T9xb3GBt6RxcVJ3eUtYR+xiDY9dSjhXx/aEM\nrSWnUuoWO0/MfCVlZ4QoLOqiPWH5kBziJIe7Iu1vAa7iC7EQsuPCzOm0b9c9\nyntG\r\n=DQ8n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAv94MLZ1fWVQo61rHZmNZXjLtNUW3HiPx6Fn3Kya8h0AiEAwGSgQtlVZCuVpREqT7lUvJvD1lJFzH7PWRoU6AJIBS8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.f7b8755f.0_1611175101358_0.2755838892000182"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f60de7df.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.f60de7df.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=10.0.0-canary.2ed2d829b.0","@material/menu-surface":"=10.0.0-canary.2ed2d829b.0","@material/mwc-base":"0.21.0-canary.f60de7df.0","@material/mwc-list":"0.21.0-canary.f60de7df.0","@material/shape":"=10.0.0-canary.2ed2d829b.0","@material/theme":"=10.0.0-canary.2ed2d829b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=10.0.0-canary.2ed2d829b.0"},"publishConfig":{"access":"public"},"gitHead":"ada07a353340882b0d087ddf967d399be3009123","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.f60de7df.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-an82dOksgwEN3iBOxU1/fH9LaaaEMtfvq0uXhw4aLib3gh8hgCHGqTx7BeeaieW6r+VHkfKJ/c3HhnD+LTaPgw==","shasum":"73645cd2e9bd8e480f4b31c9b182042389965c45","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.f60de7df.0.tgz","fileCount":23,"unpackedSize":112759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCL6yCRA9TVsSAnZWagAAi6wP/2g1YsMOwR5ytVQsWhPX\n5WQvt6jDoej8rNj4CXRwIepkCxV46ZksZHbHXAzBa0SRVeywabT52EHd7xAq\nQB4ftI+iyOmDMGlpTrrhlC2uMJlqeK4XGEwJm+gjOVItqV3qoQduile9i2+j\n+pJFlCIv6lTbg+xDBwK2BgwZi+9t8BLH2aJPkqLcJchbeC1bw4IddQD2QppW\nia/nGn1zCslIHyE0JhzMbVX9Bju6Sz1SaryJIxXuxp6ov/kOkuD7V8f81hne\nPeIciHT6EcXSqssxbj1H8fkS8jYZgIoZqLTkPF6Mm1uj5nV1qgPGu956QJy8\nnsumrcBfwLYVihrUpMNVbM6PN1cIWn1/rYaRF1hLbbgslP094o4hLZ0gDeRT\n4fpfhndcLq+E8xG0VKftwLdu7ECJnYAvR05lwd021r5dmsrIXHc9WyFLgFm1\nNa/x9oVs10vaa1v+XOB2LrPRUWzysN22gdR1s3cRJoE9aXU/Tn8Ki977dc4u\nxpQ/pyeWGme6ISZcXovg4FsWa9CMFifqY0R/T9v1B5V2DXLaQvsfor99RFU0\nSVOu67x86AcGc8efRQOJOFVu81bKxQ68axK5X4/n95u3fhVCScD99Jmm2gLe\nIamNcOYBYtKuG+QGwl9jeZQAgwyUm7S4/D5LqAiloqVswhwnbZu2J0/V6Jgo\nbvwK\r\n=kMX9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICQTAIcbjtDr5YRWlbiryDqCeuR+Ga7i3ZlmeBvpddYAAiBK8X6w56NqMpZwHBu2rRNl/MvB9lIF6sfVjwiTnWIjmg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.f60de7df.0_1611185842078_0.04123218288286634"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.664a2927.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.664a2927.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=10.0.0-canary.2ed2d829b.0","@material/menu-surface":"=10.0.0-canary.2ed2d829b.0","@material/mwc-base":"0.21.0-canary.664a2927.0","@material/mwc-list":"0.21.0-canary.664a2927.0","@material/shape":"=10.0.0-canary.2ed2d829b.0","@material/theme":"=10.0.0-canary.2ed2d829b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=10.0.0-canary.2ed2d829b.0"},"publishConfig":{"access":"public"},"gitHead":"af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.664a2927.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-v9cbDfe5n5fh+g81GGsEyOHkwbiMXdNNfQC/2CGZllSQh8eV3Ou8msUA7huWEOvVG/5ZFbMywzemb5Pa3do+nw==","shasum":"793847359b9d442296e033cacc5993f1c4f5bb4f","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.664a2927.0.tgz","fileCount":23,"unpackedSize":113648,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdOyCRA9TVsSAnZWagAAYYcP/RjCuRRiuiuXYu6W0Gg7\nnDFpfWedsnf1SY4NuTgLyG54QtrdNmnbEwYJKRa7Nv9MglE2s2HkJc+gKjA1\nsofIoxrOu/9zC+0ccEEKDKIZfB+7Bz6WMcuK8VhbUdan3AUWvgdbi+V0iEXB\nMBjrNs7RZdaQp6t0UynYYifS9lPLzok0q3N1ARUvDt0XI4HWFkR9D5PtvEwK\nOdXQq1mQ9lOJZ7rb2rjP+JdhYeIIFk3IiNR8NERKkV6Jd8DQsjErLhALnaYt\nNy61ahmh8HqBNk2nG26yVOT015jXE1S4sQRqZ1fbEMcaZNs0RrMJJAImShBq\nagkVsn0RXn1e9Sq9LYWSl3+9wVmCzvV7QXz7D+FBDtEmVUpqTSi7bYAGWA/g\n8judpVa9QCEaFhI7VDPg83d5Wowl1FVO1c5DoA8f3PtT1Zm/8HKXYswzAUH1\nqXg2gKtyAJ/LWMfqUDXGmhE5uK2azQZM7lpLjSnSYqKhtjP2ruEGTa0h94DG\nwz4kYt9MyE2mj9IgUsmFh8PenaARNNw4CqQEReGGtDZ5fIvQAL5yC2nlNo1S\nXYAR74zz8pl+6/ns9gt3CrmMUrEa8LeqHVU+lajuq4QlHZRVzFC7IIeWAnJN\n+mxUgYe9xdbR/Wrhtg/7RZ6u+0igpxqk6V8SUrgGnTG7ZzgaDjzzFTtSrG3R\n+YJT\r\n=YDqT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxfVjFZIugKGdR+2MWrfisoNd/dD1XFiuGYpzqfu5njgIgW+b10763unt1XoEP0trdJD19YBXesCcso0h2IjsjPj0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.664a2927.0_1611256754351_0.26313033224004556"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d312e5.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.a6d312e5.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=10.0.0-canary.fd61b0476.0","@material/menu-surface":"=10.0.0-canary.fd61b0476.0","@material/mwc-base":"0.21.0-canary.a6d312e5.0","@material/mwc-list":"0.21.0-canary.a6d312e5.0","@material/shape":"=10.0.0-canary.fd61b0476.0","@material/theme":"=10.0.0-canary.fd61b0476.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=10.0.0-canary.fd61b0476.0"},"publishConfig":{"access":"public"},"gitHead":"c9a270f0f64518469d960de40537a07c4cbaf812","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.a6d312e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-mgdIsKFSpoBpSDmAYR6XaIlUKbg62/JWlhut9dCyUYdF+zwwrqvNZ3YywmXQ602Y+g2yWm+zXwyyp5lW5vD4+A==","shasum":"a685113552f5095056f39414cd3633893ecba0e9","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.a6d312e5.0.tgz","fileCount":23,"unpackedSize":114477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCfaZCRA9TVsSAnZWagAANSwP/2/SbYunPXoHUD6MC2mV\nujQ8lvy5weIS2CtKw/9hZd9AznKulKYxx/RqzB8XM5mG3oRT7gr056wQiCT2\nnotBaDZ+e1vFMXlRDsKd61dzqIFrsDZTUX35dXXLmV6aEHr5KGMpt3lTRmEv\nJMuwusse7apuuJCqvINMl/ricYkBrdXg8LjXkAPEF5OwvfiUGi2wcp9d0Uh5\np/x5JelDsFdmW4/i5dt2BFOzBvCTdg8AESFGT5AmxCtCsFrz4NvsJZVXub+t\nfC1KZsMcv/OVp8KvKXTF9Qm8B3oOcxWHo+Y70QsZDGbFKnZ7IH0UU5lXqwaq\nrN6IFSyCaKoci6PyzUXbaDX58JX3bbMmLrMZD6HRynY9ePyQsa3KyQqC8/wM\nHkcYbrI+4gXlLTvaLpg4Z4tzA7rltwTSj25HiOQX+dKzYxQu341964iQ4Z2w\nQtJk4BOfjM7QOxHOrMFvXXqJ7SGbFIFRZd6iZ/eIPJGp5vtmyXnsgIAewW0D\nd36EcyDw6f0UF1asYvQDz+xaxzl6uoHFoNw+zhvGyiaaCKa6a8xGxx8nbqny\nDdpFCXuGjfjE0xLf9DV/PtLAimB6/NexLyTwoblOLRxLtOZCiquSeS3RgmrK\n6d2pUNyckepNt48RzTHqIgh/GOqfGHeAnU8PftKw/gfW4UmXfaZr6WWT1jAg\nP3yU\r\n=4MOi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIENSvJ02f3VbNT7P4HtE/EGdiT19Ry/wXWIp4F3CwbrZAiA5WV9YYm55smBdQ/GtGHeQOVyTNeDRXeOeZNdLRcZuig=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.a6d312e5.0_1611265688999_0.9356806029847486"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.027365eb.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.027365eb.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=10.0.0-canary.07deaec27.0","@material/menu-surface":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.027365eb.0","@material/mwc-list":"0.21.0-canary.027365eb.0","@material/shape":"=10.0.0-canary.07deaec27.0","@material/theme":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"85e9fc6866aaf5bc83721e8c823275ba9232a536","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.027365eb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-FXTtJ/hzfAqskwBmmqTfsnlo/1F9uhq/Xy3yiQv5uQ+LDME772d9IHWnfWs3KAkRAMzjxSvau5qdYpK68225zg==","shasum":"6f1f478f45a6a6670c3355a427a82324f6a920ab","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.027365eb.0.tgz","fileCount":23,"unpackedSize":114477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCz67CRA9TVsSAnZWagAAZ/QQAKLhV5WMLpJK7pB/kPjh\nUg2o8U4k7LoPdHKuaFXACUJTqZQIP9LgDTQofUUzEbxt7ms7f8ZIHArCIOS0\n+DBLCLzZ9wVkesL4rN+x1I0hHMSmtOtawG2FzlGjgr284YY1xIj7/A+c7ldV\nOQCD0IzkaJEVQJW77Nxixw61rtEIitUK7yoRgMEjsSDHxWEA9sASywWFJCPM\nYh3hUgwYKWLZoH5RUl+qy2gb84ebH9jkDN1/czNVwIrZcoRQYgAHlJJwH431\nOJK9vJ5RiUn9iNdWSc6NDoQ85SvlC84074pfqste20TcK9B63lC1aVN4Vhym\nLh+++B4kTmKtj4r2+Vrv4InElzwICQZkcYL9BXWZnqSXQjVr8U1SKOgpEtsB\n3glwfffuJBN9wVy32grK8JLLSS0xiZ3Ri1YMsaGXaLkn3pDp38AlZZgTA42M\n7YZmWqPpXX/m2bvYQeH+u88xDU3vfg6LgggNR+C17I7ocxt8W3U3mFDw3F//\noxf+Ng8gHCt1KJpkkct6y+Q8sdHxPO8FoFQz8Fn9B3KPTN/MQqN+wemRgZt7\n4BmcsojRxWEtii/tUMHXRIrhvuTGgDEVTiZClHdl9sXKyJmM0IJH1E0Vbd/F\nj3iVwlF+r/bw2vYcJZuFJaMRx+EpL9P7pkF9iBg01EvdRKYfO/VE42XwWF7o\nnnOx\r\n=tBcd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNmg6Lhj4OgIkMW5JXr8jkZ6BAvZFHrDCnARcb7Lp/bAIgRi4Ghq02pFKd4HmpuL3n0toqI4Sloeg4HCwjjCjZvWs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.027365eb.0_1611349691467_0.12988980209810008"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7e72b66d.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.7e72b66d.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=10.0.0-canary.07deaec27.0","@material/menu-surface":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.7e72b66d.0","@material/mwc-list":"0.21.0-canary.7e72b66d.0","@material/shape":"=10.0.0-canary.07deaec27.0","@material/theme":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"000cf6108aa08030d7569d4ad30c798e7ebe9da3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `auto` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` and content height | Menu max height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.7e72b66d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-LWJOd08fe75raSRDmW09meDckMKQ3SYdj173THSGYFj8uBtjzJXH5Z1P2Ue6MRQiTZXZKZl9g3gRFZlRklRZZA==","shasum":"51877585b05049ac2e3f77a10b6a0a17f81ed852","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.7e72b66d.0.tgz","fileCount":23,"unpackedSize":114477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC19PCRA9TVsSAnZWagAAMikP/igpKh4Xynxdx+WeFnjt\nBLREy0I678Mv+FMKkQ06T+RC37UCP8JuLChlDMEXr1RP5F7XpWzQ7PehkPFZ\nKbbYTwITe5oyPzEZLP0DV0frgEDRznLD3nJE8b5Uvz2fEYLeOqT2BAIlS00N\nraTMuiMqBhnuMa59gSR13fFk8Y5uP/TNIw4sdSKgsn9BbnFVgXL+rr30vg/V\nwixTYVho638OqX4f1tEvS7PP/i4MswEerqc1pOkYU+4ri+dIpTPUZFtS082R\nzFHgKXkgIVZbbvsvR2+jCQmT38zgbjPMAXxIpGTOR79xgvt+tUkQqHemq2Va\nKjXZ/MYeXC4Nh7f/CEOu7/QAXPJ0HXw5R/VFy0cNWiHdmdcRSEexQpIh2G1i\nWx8OCF73mS1h3Isrhd92Oo3/BHZe8vq4zXLUlyavmhzHOh2zFSzxUVZTDe9b\nOS9A/6bqyDpzYS2zidJzegGUaX9VOaTaEvL+31gXvYGIAv2993IoD56iu+EL\nPLFIstE1yGfSR5UicvqHwn2qJ4VR7feHR7qJ2ajEPgsY5+5zKlAMxDfeVeR3\nJUwsmT7Dc+E9v8Ysq1A7kR4RnrzGg1SInEKdh3FV4Tcvg1kkIJUINF3UmBhd\nSLttpFIDsRnmfL7xK6Q6mC42yrNKMr1R7jAUBjZRBSyZXz5LhHZECHzh7/xs\nF+Vg\r\n=0m9w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaDy84yhFGGEugOWya1L9bxG+5p/BmvxvnU5dlT03SegIhANFro+EAWqZCCuZVp8VXmTZJMqfItmPGY2Q2NDvVynJ9"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.7e72b66d.0_1611358030534_0.2130303056229954"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d6a1e7.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.a6d6a1e7.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=10.0.0-canary.07deaec27.0","@material/menu-surface":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.a6d6a1e7.0","@material/mwc-list":"0.21.0-canary.a6d6a1e7.0","@material/shape":"=10.0.0-canary.07deaec27.0","@material/theme":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"24a3d6e567ad7ea6c29b40c2088121baec3a5fc3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.a6d6a1e7.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-PCHV+WwdRHEeFaWf22/Z07qkipqDz4ZKbQ6DgR5bydx/4WVsFlgC/mcQHgdaC6Y+R7n/kUvRjTgEn4yoyeRyFA==","shasum":"eb30e204ac2880cd4114b88576f6ff1624cdefaa","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.a6d6a1e7.0.tgz","fileCount":23,"unpackedSize":113996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2DECRA9TVsSAnZWagAA/usP/jqzC9VqCV3PguBNMykW\naiImjVsDl/lqZTjcz2SFrq0BSpt2w8IQSoNEaECmgGrqE62in2EPMDpfLPsf\nXvTASxydvcPYMsQ8ekgcYu0ZFf8OuXhVNvWhwl6lx+zGSy8jauTBS/dBrQ8/\nSpvxnNd/h9/1WNIWe/K6V8O/ej45FVVILKTyVTMMKKQfaSkwNkqL4lGQTmdq\n57RzDeFGtVb8NE6PzlOSDVf2JMLXII1H4dieFLg7hk21hNGXg/WKD5uVY2mw\nOyMUSuh7tqT+zV3gb4Z49u6qv0i/GL0qlpzVLBUjXQbIlAqkn2wx00aa7oE7\ndPLq3A2VYMrbVBVvuaED559JsiE64HI1kXH109I322eUSJL9V6uel4RUK4UX\nS6tZWsoW1EV/47pXObexhUGtl32ZgbOoVlmoWlc20G8FPz4HqboLrrXCR6IC\nNCS7nWAI4PF3putp7lBcNnhgd0ue0oAejQcEWrJAQ7rfPL0zxvXMbBRqEZvB\nzqgqQKHftCy4xTpLbslz0iIJDG9XyQArMLgQgADbKjleVQI7UuHf4nRUEp/E\nTEGYaJIpl8CUPDKU704u6hYcTZRAI5IZiB6KkSwDNMSqZC7mnMJ6l+64S5Ee\n6BJ3uABT2oOQCDmHYud+solGybeg9FprKSfJVVZTIhxcVuobkquV80f8cA7r\nUZ/H\r\n=eDD6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClYb6LoAlkDD1yR5JQf/HR8WDS5uQdwMXzpv4GEmFlRwIhAJlhpwYtnY2Y1oj9AMgBv36T5vQJsET0bPBVb1jQwz/E"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.a6d6a1e7.0_1611358404187_0.7863263486507581"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b95fe100.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.b95fe100.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=10.0.0-canary.07deaec27.0","@material/menu-surface":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.b95fe100.0","@material/mwc-list":"0.21.0-canary.b95fe100.0","@material/shape":"=10.0.0-canary.07deaec27.0","@material/theme":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"229d3b172620cbdd5deae4cb60852f0ad2d4671e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.b95fe100.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-MBubw5mMBX6B4JMIoEJ1oip85bRt1iRhFJLFLspKD4T9X1oJYbkXdBImICZUUQDDW7nqNEDPhxhaPxsZOGotWA==","shasum":"66d4ae069422c65f4ec661104eca8d7f8ef7c289","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.b95fe100.0.tgz","fileCount":23,"unpackedSize":113973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2VBCRA9TVsSAnZWagAAy70P+QD9cUZb1iknl/KdFH36\nd/t63O0XkdFEfBO3rBKgxYWxjG1jL9zo/U8nm77xwdcQM6AcimTT/PcjVvUz\nR4965NDhIDPE7eBeqDP19SE2RlIWpkrCAs+mc3QPvq977+9kSiKHz3zMVgVj\nUIv2tRscqm4hujPdUTBS/y0YeWWmCvmm9PWQqrabX44eixII4OUY6GpTbw7S\nhvnFugJAh8qrJ04k2Uhl/PFD6Wkb1XBp91aa9XVJM9wZotbBGLszTN7MRJJp\n1TwBfC2vXiaupgv5tm/MKU7y6uIQ6v8P176bTp+jEfN5ScFiTyq3SB10lU2n\nZjY9k0TMsBbNUwfX1+crH42GE+7oFMclcDkgGIFGj1pJcEBhKW2E7TkPwXOD\nriPVthZzRCG8vLVqbjQ8d+vtUVpdluYbqSMsCLcOjZum3wYhgjpC02MNJyge\nu40Wm+PyrC6YV+nnUkg4fwX2daqfphEE2bcy9O7Jf5uGNEm7dIakzFvaNV+e\nUnFyGabF98awpHHeQt67fCjNUV9jnEdu5GbgAfrgp4JAoQJSl8G6cxr6Mpxt\nYK6mNEkkfRsyW5Wi7CfS56o+/9U6wUmK8Ea7rkGiVaRXtP+V7p1sthtiERm3\nafTzO5cAhgBM88eYqGgHqOMb2Abr3oB/UyhB66mtsZfFqfYd+mWfV9sOM6IG\n9c3J\r\n=EigW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFN5hxEF5c1zBkcB8vZnNwfrIBjR7S6HLJogp287A4ICAiEA4K4BpGP93EvH/DQJ9nY/des4Fj5tZ+6Z1db00RSrBtY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.b95fe100.0_1611359553094_0.9044093444378365"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c8797192.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.c8797192.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=10.0.0-canary.b9adb7a0f.0","@material/menu-surface":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.c8797192.0","@material/mwc-list":"0.21.0-canary.c8797192.0","@material/shape":"=10.0.0-canary.b9adb7a0f.0","@material/theme":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.c8797192.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-+F3a+QEMR9ZUDtWTMZV9NYrv/HoYRrDRb+gMfMwWHAKkTgFd4HFzVe7LLH/c1DT6GbrzSCkkSXaoHu+ACZr1wQ==","shasum":"b055b52d9aa535d5d7fd34abd28faf668fa0ece0","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.c8797192.0.tgz","fileCount":23,"unpackedSize":114285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2jZCRA9TVsSAnZWagAAKPIQAI/5zlAJQfkcmLfPcBi+\ngOiahePu5OsIWDvgxtlpcg/BoNePDqZJSbFflXRmVSruFiblg5+DXJkUi92S\nSewEH2u6/LWqSWSp3aws+cPkx5P7eskzriyFF+Y2/XVUCV2YKge+g1+zuAyi\n3qldpI40OdZWsAA7DO5t9of9HatTQkIci4q2XTVqJ3Of9w5KAmOq5IhHzaP4\ngn5vuH86MPjlBGnvrVHWHiUec5rlcD4ZWKWR+9Ov5ZxaXKFa+af2FfCT8ePa\nK//QNDYPozKY9wZJ57s180VdWcc7tvrsAB6C327LS2kr+ToyFAFtjS587slB\ntZiokq4/ywG3URBDX/VF9RCSeDA1YTa22TtWeb/xTsAQcGK3RSpe6CWE7MHX\nI4VKm0lc4cJskrk/nmvvBl4EKoKkIqrq391/NoWyc+plk6IwobI2Cl2CU6S/\nookH4/+/3SG9SUarW93BKomVugC2ocxFdccygbhPcZCmfFc693PikMayItBy\nOEp2c+H2xIsII/17gtaVNKW+jZiEkWaF0J47eDN/0gsibOh8vpTEXop5MCAD\n1anCuW/Hg6ahEl/OPyQyqyQG+Yvw6dhtaXAsUNqJI7IFGhnWsvZDtJa3N8pJ\nZYB0Yn8whhjr49bcSm//Zlno/4F/fEVEtCDxgnDKGZBlCFBx5AvkQxyjiZ5Y\nbEcy\r\n=Dr8b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC1LMnyMUwb/iuAiL0iNUN78gYgbrZGxbUPaCHIGXB1fAiEA2TmWDyU7AZNPJ2V2MaCc9TDlFXLYBGE4Ty4RHkXkyXs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.c8797192.0_1611360473000_0.5486263785566443"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.946f5563.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.946f5563.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=10.0.0-canary.b9adb7a0f.0","@material/menu-surface":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.946f5563.0","@material/mwc-list":"0.21.0-canary.946f5563.0","@material/shape":"=10.0.0-canary.b9adb7a0f.0","@material/theme":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `auto` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.946f5563.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-dSS9XT8Qa+es4bIKi8bpTzrTw+kwgmSNQkjcA2QKPC7uVCVHL2/Ic5a0dm54RhdODPwZdBvbMDL9flauPtUDZg==","shasum":"9012e46573e820a751acf7232360781ddf8b6870","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.946f5563.0.tgz","fileCount":23,"unpackedSize":114285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC3FdCRA9TVsSAnZWagAA6w0P/0AR9i4wRlP1V5gSAq3D\n7Zg787YwFMhRwRStPHsqZ3ssU0WdS6AKssc/UPiKQvxMX637Yywvlh3tFzQo\nnbTHinNKPQCEBUUMpevXaBEkO7bmk7UPThO/Sjz46vE11iXcRAWRWFkmdxmL\nY2pFfypifKoc23Mi1h/NvRWY1m5znQjzhMwPtD56qs9uiyG8tF14AnEjiCLm\nAfE31VXoWQwshnC5QXxepRKRyY5collxBS0aq6DDNSrPapKJ2hECccKu53fb\nLQWDsQESB7QbSf+WDHirOrnRIk9RW3hTES2sHjbNnoNKKvULyIcN3KiyaXSB\ndL6G8/TZ0uHLbDxbw18xJnofXzrIQFtAagnxWiRE2z8CTMUHxaF1lSx0byDi\nY2T3yPPUdocsolrU4dNPTnU9ibNz8Y2+y/Aeesnf9yAklWPFM9mNd0HTI3ZV\nAHXh1Lu/d81mnii3R3I/KJ7qtRuVc/uvRrE26CcivL0saMgvXAyJz/8/39e8\nSW6hyii/iJnBv+pj79uays2B/ccKgwCH9i+oppMrDUOymYoA2o7xSHsDbf5w\n21OoiPuBguVN2BF63scTJJkO2YFjKbP+Svqo+TLryLLmYpTJjWR6aDQ8wUXg\nlp8/z4NrnHvxAeNebhBOTBbbl3XBETAP4wqYRdF9KHVnk95naiozF4LLUYvK\njh/o\r\n=IdWE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzZhRKOVAaqY1MK+tkHGKXfXfgr5xX0X3m/sVqFusM1AIhAIRfDR752sxmwX1ilF7c1NrhXNhLlznbrHZON5BhxPJx"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.946f5563.0_1611362652943_0.8070846263139395"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.43664f0e.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.43664f0e.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=10.0.0-canary.b9adb7a0f.0","@material/menu-surface":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.43664f0e.0","@material/mwc-list":"0.21.0-canary.43664f0e.0","@material/shape":"=10.0.0-canary.b9adb7a0f.0","@material/theme":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.43664f0e.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Upah369JHOhpQCD6hXSfzgoEHxGXJgg0TbsRgSh2BiKQs80ZdhCyBANLx093RfvXO0OL3ujqTIXJCLID5nEwGA==","shasum":"41b19359c7a1b268540088d2496d9da2f67e6faa","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.43664f0e.0.tgz","fileCount":23,"unpackedSize":114310,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD0j0CRA9TVsSAnZWagAAcWcP/2qr/YUuuf1iN0WGaOCN\n5qIf6D+5Sj0/e3cke5f37Eunarr+k7+FjMJScvRObyZHJHlx8XsNh9A8Filb\nckR+vTA6wxjdoXEvIWkMOOafS6gmIeK2ZeHhpuVEIGyk8rhLPio8N+/2MNWX\nPRFGiUkFmRv88U8QZNQEszNKz4eEEfDuZelYsoi4KYP6g65RGgNlek2MOoFz\n60vppDe2483mp7t7PPjt3tGEtbLp3KfxeWERccW5n/WFTBem7+TwBfhH8H1U\n40MzmLmo+YU2OiyLYbj2mPzNStKBDM/FDLRy6nsVOhtaqTk5AVXKeEFm2VDm\n27YZXGztBgBHOX61D3VmF0aPlPpM6620apYpPnyTOQhx/CfwNt5YIIdTTjT/\nx9Pc0KSvlTD6V7JZ1GGZeD9gd0v/F6CzpjY74jOxKPNbvslunB/FFWE8xi9G\n1olHxt4SgBrM9W9xT7l+ldFViZL4JNz9xuW3mxydGh+lxGF6G5VPqYYUXb+1\niyd9Kms+kwqXVgAq9hXz6hwANPM3m9bp8SwBtMTrKJI3BFC+OtEWic0gonwh\nnloEaunSeWbEXRHqWK77sUEUG/f/wgn4t8Mk2+QyclmYxTtgiujJhdlwuTGM\n532fpWHgPQ5mesvQgNNTD6vXuwq0lRxS2BFRREyY2K1FR6tsbZbWcc1+3vrw\ngQTO\r\n=KDZB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRCeu1WZS6cVJ1SVNYTnDyH6I+F7A8E/gViM8DU4bDSAIhAMfAaFRHr0UH8tUQehX2Bv+W/eqzIZXJQurIY9yqOmEk"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.43664f0e.0_1611614451560_0.3578483119483957"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e769e3c.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.2e769e3c.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=10.0.0-canary.b9adb7a0f.0","@material/menu-surface":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.2e769e3c.0","@material/mwc-list":"0.21.0-canary.2e769e3c.0","@material/shape":"=10.0.0-canary.b9adb7a0f.0","@material/theme":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"e3a3fae1109be58444840f6099c0f87c3966367d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.2e769e3c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-0jXwU3Etkwi61LvNnOVw7xD/HqAlTpAwbsqLl/CBcBspSZY24LsOItSAGFmearIPKJUTkqoN4a+06f7HxuQeOw==","shasum":"bab1d62189bf3171bf54811de14a87ccf4ad0449","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.2e769e3c.0.tgz","fileCount":23,"unpackedSize":114310,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD10fCRA9TVsSAnZWagAAgMgP/0Fbd95h6fil7O8t81Be\n0kzrL7G/vECv1Cu0ZDAtSUnPcLc9urXaDx0TtLT4eeORTtUli17xOxmWZjy8\n90Ygs/gd4clExtRuandjE7BI6ReyCybVjDUAy9UfZNEivFedSmYvdI6yB9FF\nglaro9xI4yXzlcuVh1oFysPf+N37nYq3akll05f2UsUAUBsEjNSHqB7o8KL3\nTGUEWibhJLAtQhXu128M1AM93t8w6qpxwd6sqbzJ0p/3z0M3UPU9wOwt60/X\nDS1s8LklZAEtApSc8Nf8KHsmjGsbJ1SrAGrR+fYXE+OnufGUZFq+B27b7Y//\naoldmSlpMtrEfpKqK6NToWVhQQTIlGjtA+s4HyRQ/E8DrU/pfmtRmxqO2n4v\nowsk4MaToP5CdLGBpeZcrxItfU95h0j6rVPiwLpM2rzRVzTCV9i8HlyMQvkl\nxyolEuVdREpjqiEbbdVhlB/EsjMxB87JzbgqVSuLhsPGFd5TwxFeWVGctm82\njeMJMHqHvWgYNaUi6ku8xmxfnNWu+W4WSNDpXdHbZvVj9Y1HiM1Fs14k1Mgb\n8frgkHimsPOhVv7d7uxwV/d4f6jQoxeJYiLWXbfUcht9jBYE07l31lOV72/U\n+qevOVBco8fCkjpCplqgjcz5uMMOzcI4pZq3UdoufXd3+xWTM2+xI4DN7hsa\n5+3l\r\n=o7M9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0GmHGyyh5RmpwMw0AhTDk0pivEYIqezinI+gm0sd8KQIhAL3FjgtSxx2ZgSPJmb0ahjWivsNxeF4Jj33eSDuSa9C4"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.2e769e3c.0_1611619615500_0.814880124669487"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.14e01610.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.14e01610.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=10.0.0-canary.96878e1d0.0","@material/menu-surface":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.14e01610.0","@material/mwc-list":"0.21.0-canary.14e01610.0","@material/shape":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"0794659aea627aa04b2ec37e3f0e8cd9d976ae8a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.14e01610.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-0WQjAbkcJpooEDE+Lv3QWWsKiAgz2XSPVaYfGheqc0QCUkBTQ8bHvpPeNKqWMFeZw2BcTEw1OdFgw8MWDnZ0LQ==","shasum":"1bfe32d71a4202afd46774700c1d35be64052374","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.14e01610.0.tgz","fileCount":23,"unpackedSize":114310,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEcRoCRA9TVsSAnZWagAArnoP/22/iLdOEBaLNC34MR+0\nfpsQfm2G/QvhuZs1497fwvKJV0zOS11s579cHcQThQQBY9/7A3l8QCBlJzYx\nxcdeYJXDu/aWjTECNxuA04/kF4FRmoU401Fc7t4zvBR+3V5y+nHOHEdDClFV\nHGG1pu+SoMQUbgc1g3Iy0xbhQ84LiZ6JYOMFlIwek2dXYEiz1dJSIO7MOKnX\n97cxCzg/1YHgkbkEZEho49V3DO0wVyBCoOCFT+c/85d0ESs9dKpXE7nCFb8+\nIalS6uc8HXIoB111ZsNNqinqTI5G00GueEFxofTg+8+30KhIC91NEPdsCu4X\nkQ3wQwKKnJJz63mWzlByIJTNDuwfqwDmOLEHcn3aFsWQCN24C5FSboeUhook\nsPEgnXLt5ALnjyLgw+Lo8DVOA3m86GOAD+8zHBjpYWc5drDIXA5xp2GoTZHt\n4VEtUs6n9Md3bY3LoHrKEj1KU09zD6q2R+HVCw4QD75SyI+10uDK6vv1G4pI\nbkMC+prcB3sCPPQzv0fRvPmf8e86qemQDrgb04IEMXX55KvQxK61clmFyh/i\n2pFHQlstpfeUc5psAGoCfXQn+v0uOlMUBvx77nTHVucscFwlqnQy58lezjJh\nFIlZ5x9bGbeJ/BxklmK3m44dbT3CeJft/R1eYPTkNx4zx2lGgrDN0W07rupG\nmNjB\r\n=BSVJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGLad1qc8hJhLtwfRfgx3zcRAcM2rt/l/offxwfZck1mAiEAqy/e9a5q+33y8AZkPq5lGGQkmy+StFXBf1Pw16RFpNM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.14e01610.0_1611777128460_0.15867412421550364"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5de00c1b.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.5de00c1b.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=10.0.0-canary.96878e1d0.0","@material/menu-surface":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.5de00c1b.0","@material/mwc-list":"0.21.0-canary.5de00c1b.0","@material/shape":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"65f40b8130ec795f2a349c0699be5b3038a9c32e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.5de00c1b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-MpTTqQXUocDWnk37voiYgQ+1ErarEYszzen6QGGx8O+HxfAz2bzAqGC5KP3+GGKC4ztYp3NSYTHxHOq1UOgAJA==","shasum":"64b5e693400fe6ce2a4263395d9dedd73e684b8a","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.5de00c1b.0.tgz","fileCount":23,"unpackedSize":114310,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEcptCRA9TVsSAnZWagAAJbIP/3yIg7eDB+/EJNN2Q78d\nZu9ML/R/wMUeHWmHuEjM1v7qzCGH4UpU2/p3HSx/r1cj4wao3R+1kOOxO8mg\niF1D7G/uMzOKjjAtYdqaBfS22jJ2LJYg3XyGFxEgBAAgWi1o0PGCVKgde0W7\n21shgauNGu1IrSZs2SfB4IS3cwFy4jDjlB4LdVM+UpUPFqJMOBoxN+KSaZaR\nP9W6esfBj3q6u3lWagyu/5TgA1IyB6WOEQKFB7kdGp6FTC/i8S8A0YvO72yc\nnFTouTrF1NE0u1ictRpKdnedvzciVbpT3uoN7tWzOALPMNk7UmFftHJhOZxA\nvweTHmexUjvZhpN+BT56gnfg9kr1FYMqcR1bH7+ImEl0s5jz1fus+MBvGMbP\nW/o/zFEi+QFrfJT1fkaDXpVjwJ14VrKat8cq3OkKJVGkOrCifpszYE5TFsHj\nRRoEZNB0O9+PMqVwVYGibOqQsJ59j89s04AwAqbb/5Ahc0ODI49oefrF7nuW\njLREGkqgOj7laMyEUWl4CYymANbt0l5grVvqaH18JpfHKIR4nTs7CDvHvzDP\nZ9BRa8c4Kd5sNybEAizxSILWAO5Gbistm+VABysqn60Ph+6kKGIkjngiBksD\n7zWSlbdNjYQ5pj1QnhYEk87UIdzPMrXofefAfdSuqtUZ2hFVR10rQA0iNv2D\nLvMd\r\n=iA34\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE/dr5QP4KDs4tuCPnTAjCL3HpdfOx+2uLiDoAW1KiSyAiEA4eTF8Hl33xR/ZWh8Ra+eX+jPg+OXuFF6UYAWrdZnVxQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.5de00c1b.0_1611778669110_0.8697794605044435"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5a328336.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.5a328336.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=10.0.0-canary.96878e1d0.0","@material/menu-surface":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.5a328336.0","@material/mwc-list":"0.21.0-canary.5a328336.0","@material/shape":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"d5547f58c69336881e54d7463a7f7d92a04b53c7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.5a328336.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-ZVdiUC/uZi5G/C/AjYZWsPf5ZTdxW+brTaK1Rb3JZFFa0694D3CTLm0dJ8y1YCyBL7MF9Ku6ciazyoqOEDsHuQ==","shasum":"b22c7324f757223f26fe218c92978788a205eebe","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.5a328336.0.tgz","fileCount":23,"unpackedSize":114492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgExasCRA9TVsSAnZWagAAhpUP/08SBnHrY6g1TzyudXiT\ncBHLQ2p8vk3H7Rd8HuG7YlicU0GfvldENt0q+ErBpQTjBD9ZgZNp2nrGkJ2k\nU0LZfX9iewdDZ3mIL0jzmgWdrP+chFYP/ct3ULy8dTofZ3O8/QaWK0j9ZH60\nP1RLP9WRalzWIYvNKJuZLLeE/WzAC7UZOoEhz2GPIQvB2XF/TanGnHLiDPl2\njTNcHpx4B7h1vuRpVIYwYS6h7rVkbBN5FPjoyIx0flFmcTSJP/7uklrWorMA\nUi/56hbWFFgyvVJZJfHB0Hc06pXFPjYj19RN0jWUrRXEXvLsaT18OJ35+dhd\n85OLYJrkK3tPXfpCtCmXVqJM51K1d5SxAUu+LAcEVuVhpzSzQoHsPY8PyNc8\ngZeIJXXF3xld0ZLBXCIYny2ZwZh1IWt85KjhpxkeF1y1glHpNS4h34XeoSB/\nif6OxDs01fKMVR9RqnxQQryJY8EZsc2xUJZjNfeJJvVnCAyrlAaePBS1e4Bx\ndhKWAbpzYz2too+v79pdcqprXEM+dyltT6sqGIcomh002CpNKNUMOK0Ikp5S\nWv8umYWA2AI45pPzw++nX+3BshovoMvISq4qv3U+SoMb1ob1/GAebMCqsB7F\nyP4yRKX36xwaxyb2xXJ2/r0QEozARSv/KbBFTSyIc92Vh17UCYH2kD/rpDKA\n0wf3\r\n=s1o1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDGPltiJbXUYGJ3v9OtJ0rIbtufFQjdIxyYcK4I2JKv5AiEAgYvn3CYan3fN4HodcwNKPotrL5olsecHgd3EkLvfQhM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.5a328336.0_1611863724352_0.35612793345320193"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.533b1251.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.533b1251.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=10.0.0-canary.96878e1d0.0","@material/menu-surface":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.533b1251.0","@material/mwc-list":"0.21.0-canary.533b1251.0","@material/shape":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"b88cf0e2eded50fb9a839a426059ff1f8242a490","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.533b1251.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-u072u4AzUZQ0tZ22Y1TIMXGuXnVHrN2qV83j5HxouanURVoJ4IpTPyQ+BLCEJK2GpEtIXP/h8jyS8m9FBWVepQ==","shasum":"9497f713314eafd9778dfedf478f38fe9e1b9458","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.533b1251.0.tgz","fileCount":23,"unpackedSize":114492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFCXcCRA9TVsSAnZWagAAcVEP/0LvX2nOmLKPe92XkY66\nKoW44DpoMpkzfZw1yF0K+GRCiOlYuoXzXI5MV1ADkGvxwk80kakScqdZPia+\nlbBIb294UIx204acBMWa4O7DMnNlD7xRYAZWQqrdY9RAzM+P7ro5mkU3iSSt\nMnFWmTAztOwZI7Xg0TvVAXKEOQMyor1FnqX2jFQnGNvdoPNi4Xe2x1w7U0El\ndtgZ8PmvaB4vaDLhVdnZIGUQsF0tYof65kFRzqjM3VnLYHmiyWozIB+twzLU\n4Mo8GH7hlUuCYO7oMJDi8rAwTWyRjTwQ1OGb22Um8Ie/haqMo5TTlC6qIKJ9\n/08B14mXiGcmg4g0eJLaHJY8AozkGVLXE8VsJsWEaKLpGR7FN0n3gdz2bPmz\ntO5XFOr5JEVBJn+gJKFJhzh2np5S6Ou3nw2uMLK1CXXaFPGWzorBDIpfJ3/w\nydpfmyMGtY17Rsw0eP5eLr5cjkDsLK5+mxgoYOvMzn34WOBymUaqkKUP0DuX\nbQJ0249ArbNs63adkdW/N8UuFS7D52C0gZ0dAEHb7sA5AMpWIVeHaZTbZanD\n3kSV6occRQlCeuEBBlWUHUINNtQoHMY5bE76noTVKoKTXVPIGXsOdo+Vlolv\natqxd8r4GYCdvVrmzNO9S2stlPNZUUpAeXzizZSEZ2FTAvOcFenIwb+DMJUy\nl7JD\r\n=f+Pn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB3tXdP/eqwuaiUlEHPQflL9+WCqIxEYJts7+w+4znOCAiEA9g6N/5OEMTvHQXbChuJWZS5HGz1AvcK55oys9tT7wCo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.533b1251.0_1611933148559_0.6591845938033856"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ab5c0a10.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.ab5c0a10.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=10.0.0-canary.96878e1d0.0","@material/menu-surface":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.ab5c0a10.0","@material/mwc-list":"0.21.0-canary.ab5c0a10.0","@material/shape":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"2809af58a44d479ea0c8000c34c546f525921004","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.ab5c0a10.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-E7oE4aPJ1oYaMM0XjT6mhoQeCmcuYbJJc1CvIl4kuWgn0oiCjJjIsBKoF2k0opizTCsRRuVJlF4UsMygHDEUuA==","shasum":"3fa633dba764f4429b394070925baae53ff783f2","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.ab5c0a10.0.tgz","fileCount":23,"unpackedSize":114492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGbN/CRA9TVsSAnZWagAARVUP/RAwww7fPqqkHzmP//df\nmfFsPD26xdoTzEjRDeBz6A2P+fEjRCOGzg82krIBLdrYDFaV8WygofCBtbfN\nZcE7Xv5oS6Yqk616cTE3Ki8uUR9jWDvPIiAcsu3+yiRaj52CFKpQF1SFmyke\nvfQQn7zn6v7j9sOqTW7obDLZf72Ku/C94oBbhqt9HdOREm6DRXAF9CVVibKh\n6BrdATCwYeB/nd/oj1aC/XJG0ta9OkzWJxXCF+CEb7PfD8orTGUj0pfV1Oi4\nGHXucJtNi27tu5RT6FR3iu3yGkr/nHIqLKrgLAHT1dZ6unpkNQZ07kT3BNIS\nPQ9algMHZtwDPD1WmEEmTV6DYm0+DbR5FzdoDOWXOQYe5HHlQRJAc81iTbeZ\nqR0xxH1Ko3M/k4YgMyIiUNKhgz2gYfY48qL+jT97NTcmaI1oDuEorDnFDjym\nDNjEihBi/Tj6LactbwHeDbLCM3IBGxSQsMK2k0gViifSCqbNEyty7Sah0eHE\nnPYpRB3wFr1PxFSNSNLPAG903Im1opNIkJwT3RNZFK3d3VAkAP7rOYgVoTvb\nJWBC6gNrnCFPH4wGgfQzf6mGwRv+8mKHMqVd7cxV46k+W0TLQaYjJeGVuWJF\n9nc9rGkk0UXsPJv1yKrkoYN2157DJpMnmEJVdao0U7KAoEncMRa0BcV1eoTV\nVAP2\r\n=rMgp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2+FGvOcqbf335LdtFtGQ/P+nQ22VfYpaZOTRwSdEuawIhANhgkeHLfG5HY/Ogl4yBrRV22HOPQX7nfRcRET+cHiVK"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.ab5c0a10.0_1612297087264_0.2292165636659813"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7a40b27.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.b7a40b27.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=10.0.0-canary.96878e1d0.0","@material/menu-surface":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.b7a40b27.0","@material/mwc-list":"0.21.0-canary.b7a40b27.0","@material/shape":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.b7a40b27.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-RcawoNpQmUL7IAFmQo/mIFET5Cx99aVhauJgm6RniHbXAHjZzQO/xUdn0AWaw8MMVODjbnDjr5UUovn963lIgg==","shasum":"d94629685b371f2c4092ae4f75d8e2db6a337101","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.b7a40b27.0.tgz","fileCount":23,"unpackedSize":114492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGruGCRA9TVsSAnZWagAAlGcP/13KHgvnsTUX1JWLGncf\nvShjd30CQt4mO1CfotBfBpkDe+xBfZf/yxzPvNFiP65ttj51cGfWewLOmZT6\nzLdZvcMhjuyRasE9gbxeTHnUBEhisLyPL/apB/LWUZKkvq+Crp3lJlHKAMRP\nKHK1Xiry8P+iCIjwU4y3gA8mFPhuawngd/a9Du/ciF8vnz1455DDyrEM+MaK\nME7vflbksWbQgF2DqC+wYvHgsitNkswcx4GWwncwrHrH6GZCMtwXbQTVQ6Gw\nqetU8sKZb9dQdWGbimGyLLfP0r+X2Jvxn2lq2ddx0zaWk6VoR7szUCmNcK/v\n5GLeVt9DlOugNkH+6A+2o/2p9XGqXO9HO/1qOjOkLi7rdvJtym1el36z3CK2\nod9aCwnrfprZ3Zh0OCuVbLnN6cyYcP3xGteogeH6DpFqGrNejff0OL+vvoA6\nA+RAqZxDDPHMR4A70IURA+Jp2k2Fp8H1pBrfroM+b68GIY2xgvWTD8Ea9tfs\ndjKrF9Y7y44U5jyxwnzR99pkhTq62mKy01GH4a12WiGcWBssL+i4q0xnxs5P\nrD4Teh2xgfQ3DEeFOI5dGJS9gpuMb3LK9TAjF8nRjGxoHWafTK26ikDoNwOX\n+v5PaGHhPujFS+O41ki0XEz85NGgfD0GU3fKXI35DqioFIvaeSNLklnFvBrx\n8CcM\r\n=d90u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDu1nUUkKW4WePA2VaIVMZrSOQjgFD3ztymfcbHvDqbAIhAIH22uzaQQFivjVY88lxO4l4oIScnpc/LQgT2RTHRdH4"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.b7a40b27.0_1612364678236_0.05270913387964149"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0fdee204.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.0fdee204.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=10.0.0-canary.8e66dbfee.0","@material/menu-surface":"=10.0.0-canary.8e66dbfee.0","@material/mwc-base":"0.21.0-canary.0fdee204.0","@material/mwc-list":"0.21.0-canary.0fdee204.0","@material/shape":"=10.0.0-canary.8e66dbfee.0","@material/theme":"=10.0.0-canary.8e66dbfee.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=10.0.0-canary.8e66dbfee.0"},"publishConfig":{"access":"public"},"gitHead":"f072f9738076b381b1be472e9a6d239553e4d7c5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.0fdee204.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-Fb7Iz+iC7tcPEwP+4BpVeD4kgZ6hFoczuEpBrhd/JyjHEl6H/42RVJkN/SwZTHndxt+Ea3fIVvR/51J3mKFU1A==","shasum":"56e052949a35aa455beb6d7851dfb6b109e6ad93","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.0fdee204.0.tgz","fileCount":23,"unpackedSize":114492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGuzDCRA9TVsSAnZWagAAFUIP/1YdMXXadP7ugfXeM680\n74U/1PPZOlo+/ikrTWhfCzRPxdE+FwEddukkmvGnVT0Psjain2EtkQ+UIRG0\nuGQ8qR5D5dcJXZaf3D6AVtfeqJSVsRfqDQZodHggrqvZdKAuUJQtradvXpiS\nHRalsP627SZQyjHVholO2LyPQo2FucVp7gIzeYbGVpjnZCaDTjzWdLhOC68b\nNEFId/9J5l0sQrAgW6FiIL6/Tm85bpQnZ2Rl1iK/rtsnhvm8tRcWh0W3E0Fx\nxrzOA53ocwe25VDE8NsdBPzN9o4Qct/Ht3hE7XWWfQwBTmAtw4KB2gJaIll7\noE2oRwNA7YxZGz3a7EZw13MGrJYVrJBbRaHnUF2aEiLs4RXLbKhipymJzALQ\nVkQ88GMdXfzR7QQKbaOuLDYBo53ZjMR4HfNwjdnrSfSbMrgSNv+Gc2U2rk9k\nZgM0x5CcYUh5sEkmYJIrvTG798d24m16PgyX0i82x4HHu+fhnBAK2YwT2Zfl\n5qOlBatqxg2CIRgmPtklSUPAmE+SjswPQZ+rdQx78uWZ+jcxYSE++DS1jGcO\n6637Gqpe+obE3SPBKMqWiUT9DV7mDkdrnqpDt3BtVb8ra6SdpLzM3kBfVDka\ngSXpfX2oQK/kJAe4kHjHQuM+NG75lqrrR4/THrafg9SDn+R2wQIOk1DMD54t\nwQhP\r\n=xTkh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzimZOxbQN94JYsMlK6JJzgNQ4OmSibP8NXVm2aXc9lgIhAPrRKWxh4Qq00qJvdmsHQBrIflzaIWtMCXqOQUrZhsra"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.0fdee204.0_1612377282940_0.5727587053968475"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5160e548.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.5160e548.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.b5227247d.0","@material/menu-surface":"=11.0.0-canary.b5227247d.0","@material/mwc-base":"0.21.0-canary.5160e548.0","@material/mwc-list":"0.21.0-canary.5160e548.0","@material/shape":"=11.0.0-canary.b5227247d.0","@material/theme":"=11.0.0-canary.b5227247d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.b5227247d.0"},"publishConfig":{"access":"public"},"gitHead":"37494b60e468d33d172953edbd3ca17d4aa342e5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.5160e548.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-xEpUeQzWNxAAFAyG5efmegd5HmqjQjsHlRuvr+JIOhCzO7jUVK6E0utbR/25BcjikY8C5LPb8VMUhIM1uuexAA==","shasum":"8fc06e63aa085a8aea72cc7579fd5212d5a7ec4d","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.5160e548.0.tgz","fileCount":23,"unpackedSize":114492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdobCRA9TVsSAnZWagAAG+4QAJcS0nvSmfwJ8BeUsMYS\n0THof4EamzjnZ1yjjrxMNT32mr9qjODveujitdKAjPexpjG035DLk1Tb0Vko\nhpJdgc1poohtbxyRAmaQMRkubuAfMYHttWsYzWo/Uh4DAxw/BCzSjqpPTs/X\nA8n4mgXaY1wG9RSd+xyuvaQXWikoTGyAT3f3djlZbfD7TCjo3TLe59tK3oxU\n5zGflFnULK/CcwJoqIXJZiItcD1XKBn8vz67k0nIs4jTUkstJ5IvWBELOJwi\nfiqr76YC8P0TehzIYQr6ZMr+asbOjhzRHDgQNk/8/2ciFhHEY33EOOhbxDcY\nUO7FOoWB5Tx5n/i7usqnEtOEVypUI0qpJfxErzPMPAVuXiT8sLC5/hf2c9eW\nENWgfO1Z1UgUsNBpECv76NOD/8c0rpC6nRCI8EkZp0C9R2xcQa/aAynKPvMW\nmdGPoMo4Sy2PDi7dFow4MbGFN51xl9uZAOQh7VcPkHIfaRQ5/eK8cOgXdkVu\ng+k3zQFsfdtmpowhN85mhNXiDbsd8ztdiVPJNzVJX6vMfvOLoXtK5vjZ9ffn\n5wArM40bAPNu5Zy0mV55811t3RKKjYKqL6FHfJg8TAVQmRJHaTuINDLlORf4\nbfGmmBr893rgt6mBqPVgq8/wX2B0Hz7RaL/4WC7YSC4oUhG5vredD0UqSfuF\nR9g/\r\n=T59G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtLI7+b4xGkW0E+n8HjBod7sIZaHkR+aEjJr/Mhet1qAIgWHs0hnmjAdi2THideQrPhQEAN8t0fS1SwRspvLMKKf0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.5160e548.0_1612569115176_0.7910210608925226"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4fa2daec.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.4fa2daec.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.aac8f5d9a.0","@material/menu-surface":"=11.0.0-canary.aac8f5d9a.0","@material/mwc-base":"0.21.0-canary.4fa2daec.0","@material/mwc-list":"0.21.0-canary.4fa2daec.0","@material/shape":"=11.0.0-canary.aac8f5d9a.0","@material/theme":"=11.0.0-canary.aac8f5d9a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.aac8f5d9a.0"},"publishConfig":{"access":"public"},"gitHead":"49d5ec72e92627f861ab94dde045181b5eea9f00","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.4fa2daec.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-K53pYmdk0njpUmyweuNAR9OGGaU/c8i4be8NqMFe1F0dPkRfbnMCbaupDJXSOKI2MoWiVHM8Ug6uzGcBAvpw6A==","shasum":"82bde288f6935b898d232e36abf5c8523a20a4ed","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.4fa2daec.0.tgz","fileCount":23,"unpackedSize":114492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdUVCRA9TVsSAnZWagAAX84QAJrOgXVkBr5Y83YcARWq\nCF9VIesjKY8pNKSbeqK0CqwDOVjM2u/zam5GGYOMSS0AhJescq5LMCaSsM7L\nfJo0g42jYp+fhZPGiX2JYNh2U3jLfoI7dPMYBslN7HCrfIFOE+L3gz+r1Wg4\niCRiREjsoAAhpbKoarINAL+nk9YZ17HekT0dl4dz7W3ozuSwK+SFz4gzkuxn\nldzuQjlp1IFpWJSzxrGZcgRoSWTMeDcKgIBXoFMKzjlMS9uDsykLDyAWKa+k\nKLYGnt8uYCSvlNBghgw47G9NBHYJgY8CPodIZY9Ru9UytnMVA+Wey3szNmOl\n1/oYRcYyput9PVInc8FppdmAbUm/alDdfE6yr5pDkRocxrT+qSQIijLgG2Yp\nC0064hP1cvzS1yJl/8is4teUHmTh4EHz81ZQXWI/sTUttwzUbvTvNZnPOBx8\nsaxRnZtMjceoxNJO4v4FttMVRVSBFVcPKsfwigex3kV04by7K5I27JBI9bk1\nXqWqvgUi+k42Uvq3KbCaAymyh1LkpLS+AA6hVvWaldyd75Nl5K3zYZ2A9TxX\nBlkBDRzHMGy4JUrXpzNJxwoJ4MVIDX/es+lf4s6ZiFkWrr7SOnXbVNSdALRL\n3QAiZ1P8PB+3w8YZH+rr4rlDUocB1V3F5SU352ACpi1+GklcuMFqZOlPdRSy\ngE72\r\n=j68g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB68N78pY82tokDvItFYSL4iWvsAeqA/Gtft+z4q8FmSAiB/lsEuNQxGF9k4twCXIW0X2MrTsOU8A8o0ItZiis53yQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.4fa2daec.0_1612829972945_0.44282147773112035"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.67f285fb.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.67f285fb.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.750e18fc7.0","@material/menu-surface":"=11.0.0-canary.750e18fc7.0","@material/mwc-base":"0.21.0-canary.67f285fb.0","@material/mwc-list":"0.21.0-canary.67f285fb.0","@material/shape":"=11.0.0-canary.750e18fc7.0","@material/theme":"=11.0.0-canary.750e18fc7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.750e18fc7.0"},"publishConfig":{"access":"public"},"gitHead":"04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.67f285fb.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-nESRiccTH4Cj+qw74Q4PDnkPAqGbCYFyKpI3yjFTVgg5lW99yms8bWYHou9qRkEj8dFDHdhFeYg0B1pLB5kpGw==","shasum":"9e08197634b8eabcce3dc795778e5e5250e764d3","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.67f285fb.0.tgz","fileCount":23,"unpackedSize":114492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdynCRA9TVsSAnZWagAAyK0QAJc/bqWsBwHwXGzmUd6h\n0zHTfe4RWvc4Ry4UEQ/8BV0K34u/s68nBtOJomiKWRg+ZOfE9iv/1ybEmeto\nAu6uE5YsM7WxG2cSAdU49KXkKhYAUcJW0qZqPdUxdhzDCZIvoF5rFwSLUfUW\nH6k33jnqn+g8kPDIV8k09bvuOwO3cLU19+9+t5GttQnfrM+UdJYjH+Xsr0xY\nbjqYVDEMuTyckAu//jrrgjhj/Ua0dsSAEfqTJODG66fr+2ZePWlz0mkCLm4y\nL2XZEItnIG3MZ1gSGi9ltMALeMHA2AZuPI9gPC7Fv/cI0UYSBjQemjWNJ/Ej\nJ8m9fKJrYyDLk6jAAPHsvVQIcHU/hiMvzC6ATp8CyCsNKtEcr5fIuDXI+34d\nQmXpXHkdJV9S2FdfGBstYkqZzoLfxob0UBnUtghqp/5h6+CbyLLT6X7+fmTq\nrmImtncl6AcKvYhrrMaR1b83j26pFWIbRga9YWLdANKTMY0se1EgwVDH2Dof\ncPQqRy7DUSFqR+/f+0xPa1A2bH6hyhNjfx61bqGG6YiXSRSStq/UkTxglfGw\nQsr/ML2JoAB9LmPWqkmvAWDBpYTiiqMtls4QT0n5EGtSgoL6Q4X1ysGPQ0ED\nwrNS6tObFc8tXtsRDbML/G6eLL3HePmxvd0HH+lbbdCasyNzhTQhlhasXnBe\nPmkR\r\n=OmZa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3sAxwpzO7QL9QQ9rh4Npqf1b2GBBPs1b33kGuVcsGHQIgSBdJEkbGjPff0Vkvje+MX3OtZij/gJXgsLLZGX9B2g4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.67f285fb.0_1612831911219_0.3550465439307511"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.58cd5a70.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.58cd5a70.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.b62b1266d.0","@material/menu-surface":"=11.0.0-canary.b62b1266d.0","@material/mwc-base":"0.21.0-canary.58cd5a70.0","@material/mwc-list":"0.21.0-canary.58cd5a70.0","@material/shape":"=11.0.0-canary.b62b1266d.0","@material/theme":"=11.0.0-canary.b62b1266d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.b62b1266d.0"},"publishConfig":{"access":"public"},"gitHead":"bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.58cd5a70.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-QEtKaM9IE5+P6ha8ckMgT+eK1p1Y957hd2oit6CntEXXKeYZH6JS3dxZCcNWGbPjjjGnB2+zoA4RCYXI/Aku0Q==","shasum":"157ea6328d33fccc06e42f74df9806d0d6fa69c5","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.58cd5a70.0.tgz","fileCount":23,"unpackedSize":114492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJZd8CRA9TVsSAnZWagAA1+MQAJz2UDpLfeLT2FVjOR6P\nIjrpuRrXBZM423D3dZtZQgpqrgzs1UfEGVhK1LCjQ6IorDY5ajTE2cZjanVN\nZRJSP6Al40P3HIUKpH9fy9UhMg8QJf+GlX8ulsp01cu8FzVGcbUaIVEBvsdd\ni07WzV5GqwVTkVwwFFSyjFVjN/udGPsObIMrUyPIysHH2WTNuQKn9iiVsOal\nW/bbYnuKvyQu5ty7caQ1giHOH/+BDv+d1yaHQX9ig/K2B/vkuxAgQaEfgqO4\n3dWQnz69fsVVMJZWNQQzGTc9VCbetdYlOd7NbhtBVUyY/AHRmyo9HvxSZnhu\nsGfyg4speUugS2IQuHoescKvA/xZ8JU5mvMMqLrdWPAvCtOx7A303splkuRQ\nwpAGqopvFaloBO3OVy91SV194yvUtyPZyW8lbcAzwrWGLowKlUaWyweFkbLS\ndmygC3G+8t3xbiIEPTwBr0GhkXFp9is+Ho1qHBrE8QNDvdThiT0cHhwEtAxv\neA4auoJWCjGdRHyunre4ZORGQDd7elG3tCE5Cheb3xXse3M5mPzRXaoaWALZ\n41i5r/E9H4UMijfvvTdO36y4I+gCrm4ipFYuLZOchYdnCzlnupmKiyPZVTDN\nFpveb8ZJuV3x0eN7N43TTDR4NVkaaLX0w/ldP5HvxWKieDYnZOwd7jv5IDQq\nUL4H\r\n=RVwi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDK1FvkXCW6JYDEvBBtc77KxP3zx1vyfrCkZTFPMqG6SQIhAKImhqA71qu40Yk49zo9t2Jag7xO+O2L84QDeMDXMgWm"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.58cd5a70.0_1613076348491_0.26009286152105293"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8107ca43.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.8107ca43.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.a6b3101fb.0","@material/menu-surface":"=11.0.0-canary.a6b3101fb.0","@material/mwc-base":"0.21.0-canary.8107ca43.0","@material/mwc-list":"0.21.0-canary.8107ca43.0","@material/shape":"=11.0.0-canary.a6b3101fb.0","@material/theme":"=11.0.0-canary.a6b3101fb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"gitHead":"579eae14a8b8a347a0e4b31bb6650c994d1df472","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.8107ca43.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-KKBKZ5bCMqBvB2Mq4c6A/6DP4PQdSzcG1THJAE96uxq5244Cm9HONZ1tDulxPpWxw1j4IYTMXPNWRkwL8VEdEQ==","shasum":"0babdf1c4ccaf51d1bd1834c135983ae8e161645","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.8107ca43.0.tgz","fileCount":23,"unpackedSize":114492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJb3oCRA9TVsSAnZWagAAvq0P/27gBFPn0xpj01IFm2Hv\nRd1Ugr7NU1IWoQQVJ74fbSgFBrH/N2jEvyhN9eIRM4OkSOE19JHPM4FMgnG1\nl4avC9x1Eb/MSzwFMk4PDYUDCM9adrtq/NtZSB2sUCbfHb+goHlFxEs0Nol/\ntXqLmU1EDU4pi5foD143Qm5fUoMpGv5TGHfWPK7TatGZQSupbwN2tZeKPblJ\nMwnUu075gnsNGm3KaT7QNG92tGAfU/nQ1V3CtnYRJgAzPPFbngHta3trP/+p\nJdJtOQl3WX6x2IzczmAdNC2PJmUM/Rgs5nOaeiI00W+RuNzrvJbDOF2J4OA4\nP+2ILNFSGkncmnjiObDvw6lbZYghLH83nu61bj1242CbBoH7CWGh0WfD/TaH\nHw0ddqCT3UqwhgvmAmuuFfQ5v+7lhpG9CcTAqMyoKVSFQafUkP6frtMeAuk8\nhlpaTRQT8DbeTAgQyIgolhdJ2nmvqHbkdCyhT/Aupj73UfmrDJSeh7ZAjz0o\n+nplh3PCwGVcmjr01Y8PUI56Fz66UeZcP9MlHCizvyUclcNDzlI2HKkiFIBW\nOUdVdEukbUVhqpoWo2fIA6dl5u8+DRmIUtwajz+5F4dnuAZGc9B8OjCIbtPK\nE1XCLGp2/xdhm8y+E9fqacjONmTDnxm+RBJMMGw9Ba4Bl7i05VpFLriv0Dea\nFQpl\r\n=OGqh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFgOj7cMBZx93UEXs1AelxTSl8DJiDD2ugLjYneAlcIzAiARcmdpdVCwDOsmcwv/CoFB+5cv/+Yd0pWTY1BDNFeRLg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.8107ca43.0_1613086184037_0.883256745439505"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d35d64ef.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.d35d64ef.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.a6b3101fb.0","@material/menu-surface":"=11.0.0-canary.a6b3101fb.0","@material/mwc-base":"0.21.0-canary.d35d64ef.0","@material/mwc-list":"0.21.0-canary.d35d64ef.0","@material/shape":"=11.0.0-canary.a6b3101fb.0","@material/theme":"=11.0.0-canary.a6b3101fb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"gitHead":"2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.d35d64ef.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-KaX60ocQWYD8jVZXpaiTahSMStCKkcowsGcYeePmoMQXOz5pxV/9K61B4TajFJFLSgBje9w90HpMG6ds+zzaZA==","shasum":"b9ef0a4db0cb11dbfac23d2f0e0f14a885990364","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.d35d64ef.0.tgz","fileCount":23,"unpackedSize":114492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcE0CRA9TVsSAnZWagAAhPMP/0gIU1tPuIgn+6Q+sRf+\nFcYDZcuvycTqHFLUpS9jpcisUtpBJQ3axSQx1QiamO1wq7cbPdMs4yoqVmkA\nvPyt9c5isF+9NbdRGWyCdekItBWvOL+UpTs2JC6q0Lw3+VJUfDR2+OWS4a3l\nm0ijY1GXyYQVBdflKkfL8SGJtVAsOUzG+CaR6B+N9TZovwVEdqSfsyLzY9yf\nJDS3LazY5yex8CqtOZSKOn+S/NRXbICmRK5hc6/HruBlbSYp+CdgRDCG95Sd\ng/OEpffPPelbbVAiIROJ0cjPkYozZap6zNXFBFUO2aQI25vttz7RGbYvll44\n/TW0WDewPz0o+fL/VgpM4o2j4iET6UNMwr9ibGhHTYt/c2kO8oe4s+f03LmC\nMbOCLdnu48tY/yj7wUHofUk9EAJSUfcg5qmyr98puGIZ6PEvvsRLs0GdjYje\n6jrrQJQtzHinJe4NKHFCc8mellp2IFmHBqgAqDsxc9MwhS0NkKBnKnG7Wpa1\n75oR7heWcIfVQA8mxvzC/6OGguNbODbMGiH5ih0KTTqrtt9Yv2gwQMkby/+M\n3p0rMeB+r8VL36ijuek38L286/g6K3s9V+CblSDy7Hn//aaAoFVqWmQ5QWwA\n/jzBlFxP/ckAkE+YLgaKJ9YppomxUCvicnJ3WZ03wXQ9+uzrbU9x0M66dLlE\nIz9E\r\n=8wm/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDbsz5PQVyba3z5yUifXLL+hK5+uGDRdSG75+g11ifS/AiAF1XnYJA7kZFUpGZ38oLrd5PeYmGeFqmAqZguuA3QO4A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.d35d64ef.0_1613087027856_0.7817582296099519"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.78bcf058.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.78bcf058.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.a6b3101fb.0","@material/menu-surface":"=11.0.0-canary.a6b3101fb.0","@material/mwc-base":"0.21.0-canary.78bcf058.0","@material/mwc-list":"0.21.0-canary.78bcf058.0","@material/shape":"=11.0.0-canary.a6b3101fb.0","@material/theme":"=11.0.0-canary.a6b3101fb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"gitHead":"98a4001d56b1e200103e0862b83b661c87fac551","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.78bcf058.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-I8EP6J+gbrz7PjloEX7+SdiQUmTy0cAYxHJNjKk4TJbwENZMl+Lbft2BAK8EJF3zfj0npO3XEWI3p4nQcaysHA==","shasum":"53db4ab3379f7a98bac1092aedb879c0b68e8e14","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.78bcf058.0.tgz","fileCount":23,"unpackedSize":114492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdB+CRA9TVsSAnZWagAAvXAQAIkdom1/PwzZjlPJL+vm\nCY4CLZ4ljmpDRpTLWgql8g3AI3Tw6MsceyGcKkup67cXoRTAXxp3p3HwKE2u\n4NN3QEUUYo59aSS4epWrl6tKcGUHIRyfwKXsOtWHv5kwzZKH4nBOQFYjA4ru\nVnIgvKWbKf0v1TIr8HEXdbSRkw5wOjVlVLiU5w+ueDyvaTIt5ViG6bni/EvE\n9gr2PaGnvHvoJg3DtB2gkuEyIilZywc0NdZnrBSXwRPrtdf/r9gl9Qgkm5gk\n4DQrOldN4AuIwPfOLlI1v4ysahdcQYlWErMziWaJbbLBL7zI+Za9Ops/lWU3\njDW86S/XxjXeaunWNDtO6Fle9iIXM3iOlUVEkI+nt47SN126FUZ0eYWZc+bJ\n1IYJrxGrJ2EM+E2w+P4Q1cmKSz6ldubXINz8HYJUQWbbEUPEfkUL0AKIpaGQ\nUI65beFg6YNLcdrkaDxHBhsA1p+EfrbEVDXNAiiUgE4s3JuS+CcrZf9cvTvj\ncuE5hkNBlS477vQna30l58RDcTTTOF3AxlC6n4GOpMHSH0Oe+Y6Z6YB59qcD\n1FX9SnrFuocimbWscuTYZSGPBcy6eDOxltfNyq/LDPOpVjSkqKJHUuvqu1K6\nAS9i0ebDVs7sGbyuuNdZQRJP1qnF1SBIxD87IIbEH22j7ib4bBkiOnqoOpaM\ng+76\r\n=HIsP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDkfeh5BHI3zgnZd7hPxsWUmD/AsW8keI5bYoMS/HB0DAiBwFR90fHHpTCQsKxpp4H84Kicz2XbdD6o86EA5EpvRBQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.78bcf058.0_1613090941868_0.33982008681284026"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c6908fd.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.0c6908fd.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.ed88df700.0","@material/menu-surface":"=11.0.0-canary.ed88df700.0","@material/mwc-base":"0.21.0-canary.0c6908fd.0","@material/mwc-list":"0.21.0-canary.0c6908fd.0","@material/shape":"=11.0.0-canary.ed88df700.0","@material/theme":"=11.0.0-canary.ed88df700.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.ed88df700.0"},"publishConfig":{"access":"public"},"gitHead":"f290af657508c2392a786548f206e90e8bc44124","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.0c6908fd.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-UKXBhBN+CdD7FmdndLz09Y8KL2BlJQJyE/rROBiE75HChNsP156v/vvCREPLOXb7GuYc7Bhy/dRB5hyZ2tEUOw==","shasum":"cf5b30d9d584c3d6c7cb37e65eb26ef4bf0dbb0e","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.0c6908fd.0.tgz","fileCount":23,"unpackedSize":114492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdkMCRA9TVsSAnZWagAAKtsP/jvbp3D4ycPYTGuLTVFD\nevZq0MRDsLJe7D2Y0Dq7+3Xnew/bt/TYgMOKhEagpxNnN6Atr2qLA4IUJn9u\nkwVhMptHIynayG2TMMVK6IG2WJeyKxbVWB0FLIBhoUzpXdscgIiLH2SoP5FA\n8RXoge51zfYS/2r3rZ4N8hkPc0XE7BOC+s4xQSCZ0ZCpg20Vo/1LCVStJNI1\nOpg/1ee0sVHIktmldxfizMcOC5WcC1rPxDKkeD4KWSpWkb10DNLUJs31R1sD\n0qoc2eQ47ZPseDCJxTTw0asJtn823MtqjZKcp8XmnvH0JGr1Oa22luB3uV4H\nmTyuC8DSJ38fL0kQza0q3uZpYKR1CYTClL668u7TJ7pGD2Zi8UDBTEbfn20I\nPiVXtxMAcHoXLuB7Z5dFbu5IpsTd062HhE+VHN83Bz1sOE9QpGr28Cl/QU9i\nyvgN6rDJSxGBb2XadG9ld6Nk/g/WmMdaqNdRjZ364Mfsv8LEcYv6dsB9EnqY\nv708L5mkb0Jb0fPstoCXZJM5WDmunaNevMXFpmy0UAvR1YsuQvF2zVOL9SLR\nu71shU8MDm0CjSqplF+rO3rvQWhw5aJSBsQQB26enEOMW06HhiTlefUf8Nwb\nga4KauFUkp5ncPJ9pj/yb1EgauzIa5H0CDTz0Za+yh0ahZhEsDEA0RMfMrdO\nShvo\r\n=YjdM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEQezvBIIdUVM6B9TZ2kNcXHkSjdnLcG4C3gWCFUfwkXAiB4ksQpKK76DwWm/O5ffBZZhT3x9aJ3kVAipfm6kMZk1Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.0c6908fd.0_1613093131676_0.2670612691269807"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f1f34ee0.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.f1f34ee0.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.71fe9a067.0","@material/menu-surface":"=11.0.0-canary.71fe9a067.0","@material/mwc-base":"0.21.0-canary.f1f34ee0.0","@material/mwc-list":"0.21.0-canary.f1f34ee0.0","@material/shape":"=11.0.0-canary.71fe9a067.0","@material/theme":"=11.0.0-canary.71fe9a067.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.71fe9a067.0"},"publishConfig":{"access":"public"},"gitHead":"b16a616d2cecb5d8aa3c279c76b01b2f49ab6965","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.f1f34ee0.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-C7WCGo8+t1p/zujvSjX2IGCviwWHfpDZ5K7jQ+iAJ21Kis17ZCX0Qb9gDlCmRNtushJFCyT3Dt/4TNOucgKJmg==","shasum":"9e6717ca89f45306944c518d7d45a90603e7563c","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.f1f34ee0.0.tgz","fileCount":23,"unpackedSize":114492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJuKoCRA9TVsSAnZWagAA6bkP/R1EZorcFNMmr/Zo/1DX\n2uARfmmSvTxUqXeAkpoB0tnyZUITNJHpJJIIMsCJXMma4pS7O+PLlWrK4fkt\n8zz2KQeudS2f4ptGdPY6YdiDjay7N8DOyud65jdkmH8ahm/eFRoxStPERqQg\nIX00y8pLO0UwyfHIJo3VKe4D8eYm89CKsOw/WfDZRl4MLSOEYCCjil5Gvgy7\nDELSIugkG/9d4frt2v6E/uE8nMHcjy6enHx1fNWwdmfQKwbB/U0FX69kCvM/\nTk/Fvlyo6pnhxEPsZ7KQCQco4NmQp6ecd6RMUy8EckcgD965NXApg4WojJf/\npNlx3LLxxbxfdsjza84j7LXN5EZnoLBgr5Ce88uFYp0h/9PkcoPWRFNxFZnH\nP/DvUAXZLB6WAM78QKeFEvgya0730sqqnd1RU96tVVJJv7/rUuGLgXtDAPIK\nwumBL/TAs1NPk7fr1X+Rkfibg50pfyhv0bluK+HIsI2NmJnanaE+D+jygDMy\nfgLybUprvLA1viB7BGtY/iWxy0KNW/HUfnK6SECKWNllJjG6RHL2Fi8zNQjK\nJe7a+y2MSbj6tQLBZSlnSPh32AST8wGVi6ChDxtDQBZ2XTAcwQEtkKJbqb+1\n6eyUV37uPZSiNp4Fh1s51inYSW+OHsVr8hZfqkAzgr0SH5ILwOqwcF9XT4i4\n9Ofm\r\n=OGYF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICWp42QR+kUFPtnzBXFXmTwWPOKcdD/ffqWzSaZzVewuAiA7551b2HHHQAzjseNsoCbAx561lO2pJE5cEmR381wCwQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.f1f34ee0.0_1613161127644_0.1675149066442454"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d84df029.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.d84df029.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.0fd56a86b.0","@material/menu-surface":"=11.0.0-canary.0fd56a86b.0","@material/mwc-base":"0.21.0-canary.d84df029.0","@material/mwc-list":"0.21.0-canary.d84df029.0","@material/shape":"=11.0.0-canary.0fd56a86b.0","@material/theme":"=11.0.0-canary.0fd56a86b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.0fd56a86b.0"},"publishConfig":{"access":"public"},"gitHead":"af09ce2e1ef6f6b486ea977ab8890e81af842541","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.d84df029.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-phxF00UiWgUbVTrs0/RD48UB6ZtxA+ta22N/cEoM1UpGGtSAxRsgqPc0Y5jgZUj6++kl9C1rAKrqD+x/IJnstw==","shasum":"591cd7198c9670f304b61e8fa78303334152c753","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.d84df029.0.tgz","fileCount":23,"unpackedSize":114492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLBhQCRA9TVsSAnZWagAAgiMP/1mv36yKIxDz9oLzbQji\ndOSNRU00eUOyYhpMc9UsKEn7tiOr6QWTpFwEwW2k5ebshR12DneU50olguZX\ndPCMe7wbY+eHLTCZPr4cltFgTJ0sYj9/sLCI8FVrNerRQ788GsdEZWguJXi6\n3EZSEzAEj5/Uv8r+RFq9NlNOjXk2Iu1w7BkYeaVrr0e3/NLZHZWsGSgu6D8N\n1YbxFCapHnyC7rfjvYc4T4/6CKfQqpz3zcD9BG027/A+WVQ7pT0OOYa0lenD\ngzUY0tGjTuBL8/Z05VchPwVRMh/y7j5n5CsWWuqKGz2gY+csqHnrBdxu8W+S\n6yhq0jhs2YvnYI+A/WEZ3xFIqKJqVLvFFybbK59g9+xrvSRyoCV0s7n2cvUq\n3bj8tGVAPwhSF9EIJW5OfxiodZY3P3sMDtVb5DeCabliQtNe344KZLSU3Vlc\npaPNMBvbYnDA+xvzdC27oCUa1q61lW1yVU2/kzzGJ8O4/o+XD6Us9Eo2rpUT\nUY1288wDpiBybRRdh75N5cTKit5ZT3cojkIA7vL0Bjk/BFPL09XDFO6iM5Bj\nTHiU+UITw9iFkwS9cKDG3ZuoIv9brUQnl4Kbi9hTwwat2pol1tueKOD7hoZ4\nZ8jjmSzKQOSGa00YnouBkHvHjimNKCl80rfSzduHZ3bJwmqhqIBucbqrTXb1\nHXaX\r\n=o2fR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXIU7oJHmKdHODTcCk2/iT2nbyNpj47fs18SomGN+xtAIhAJkoQrp9BAhsBCSakaDmg4tq2Fc359PsUKhPfPREzLII"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.d84df029.0_1613502543479_0.21375142556450344"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c525f471.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.c525f471.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.f9cac96cc.0","@material/menu-surface":"=11.0.0-canary.f9cac96cc.0","@material/mwc-base":"0.21.0-canary.c525f471.0","@material/mwc-list":"0.21.0-canary.c525f471.0","@material/shape":"=11.0.0-canary.f9cac96cc.0","@material/theme":"=11.0.0-canary.f9cac96cc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.f9cac96cc.0"},"publishConfig":{"access":"public"},"gitHead":"eb401daa998f20b7222c2787e22c669e642586fd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.c525f471.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-ueoex0UW5NcrP0jpeHMtOqYmhhckG5DnK1PdFIVSS3o2jMD68RPONhqEdkq+1CghiqnOm7wUXjIZa01Zd6rnhQ==","shasum":"16ac7396ef65b88a41d355a508cb9e28e14cdf82","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.c525f471.0.tgz","fileCount":23,"unpackedSize":114492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLYJ6CRA9TVsSAnZWagAAQ1UP/Rmm5FU4MEHeQ/UwrQxZ\nC1o+dvqkn5nhJgZ1DAbnrz+LKwHrjlL1x3ox53sfLNNLVyrXZv7r5DRa7eQG\nS2eIMR12gyGN4BFSU/4ffTYtpZemEEwxbRbjoctaouonjJ9fHLAb6RELJQty\nRGnThmC9HcSCkpJPqDsOtqtcSUeDB5Zi0RcaxubDMgLypgVV+x2QLPDhSGsS\ndiwPXDz7RwCMweOHa/t7Qd+Aq9Jj6DjRgGAWplJEiHHqG3oiZ22VhDym/kCc\nWEQjyYiK3W0sPOBl0Up2t18tYb53xJlPw+Be8bp/7dgTz6HNkQPQ1JGuQVYO\n8GPRk68up7/2zG49+fXGzonXIxH4fsFODgJCHF6zINfpmvDZeFDEQPgFTHc/\nPVdGIS9Ww+TfLfvqVgqFMVOflANBnUdcvr5X3xQM1qM4j7w8pl6hWpQ+GjFT\nwJmz4HvINBQUrFtz66Zj8z8YIdm310dSU8H6aNKv6153iUaRUO+eITQyE+yN\nQD/+csnqnv8suULBI5iZt8D2sF8BsPkVIE/9mx2K31wZoD9Pm/eZ50jx64G9\nlo3Z04L8UecNVKWowsZLqX0m36Fb3KG05TwoqCp7qO1STvHbqtTfzR0Cpo/E\nUbxYEdGAVgUascKQwMpzxo9pK/xBgMAy1feTQltaxbnUxXQX4oAci2aHqEE3\nh4IE\r\n=5G0u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEWXMlYISpOZXkROC3Ge8XMOwV6F8zDjdX9rl/RuFNGAIhALDp/X193+WNzjQ8VHCVZxva5QOGUEeutYToAZvCTaqz"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.c525f471.0_1613595257881_0.4741542043000755"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ba7a1b35.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.ba7a1b35.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.f9cac96cc.0","@material/menu-surface":"=11.0.0-canary.f9cac96cc.0","@material/mwc-base":"0.21.0-canary.ba7a1b35.0","@material/mwc-list":"0.21.0-canary.ba7a1b35.0","@material/shape":"=11.0.0-canary.f9cac96cc.0","@material/theme":"=11.0.0-canary.f9cac96cc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.f9cac96cc.0"},"publishConfig":{"access":"public"},"gitHead":"5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.ba7a1b35.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-VcoVbtzHaGnouhxtkC9fIF+r3GrLHB1l+X1DQQ8X1zi4/yhLALhpKVmuAwcwcgO73Hio2eIiG+1QOAP+XOhrNg==","shasum":"5a5659996121d6f1f358c776b4804619109c97c2","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.ba7a1b35.0.tgz","fileCount":23,"unpackedSize":114492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwL3CRA9TVsSAnZWagAAqAEP/inPm/hPHbFvX17vzFK0\n7kRxNgDp6TjUIv/gUEmY6XLCssK7eRZHT3Mph5WLXNppqzVZHN9+MarW0xEo\no9b0L6ODV0IGl1ZfhRFbQnFyc2tPASMIaIgCtwMvQ5jfGgbJq8cd1mulmHLr\nXGIkI6BfScAFAXxM3D5aDbyCe94UWn4TDGrTszTCaqahTqCQ17gaUJgHk8eo\n65ybcNEz6kKH97lrSd1WF2VYV9NAWnXH2PXWG8RZf1P/S3D93HYDw9zRzG0l\nsg7FpcSWtNr6giUFlBFgjH6x/2nM7AhkCtQdgf325Xzl5OGB+Pnowmxdq3OF\n2E8kXX5E4nh8GoyOVEAfZEDXmY+1IFRg1vHn+Pb880BXN94kY40wpHp4/2jZ\nlpNfgVTN73/WV+X/xLJoAEwiFZ5p0D+RKO7VEpZhTOYHqgR4kMVtf9ledIqr\nhrMA5H4ouYElAkTngYKVMdRESAp6QzZXk8KUPGG2Dq5a/GBSRcB/PXOEQL3X\nzT4VgSRunYK5mW2zWLSad+0tNWiFmQt7X/PE8zk5cIxvvFdnNGnUsfC55/Wl\n1qk1F/1Jho6JTYyhY5tqRal5eAl2heY4M2snjqefAooMeHLajyt8bfvkE7T9\nbunTE7qobhRFzxTZl5otfMDRQW4fRCNjOPclXPOc1s1hdF5SvZmVvb/cH6We\nV9lT\r\n=GayG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEHMTRmoM4kIgIVBw76X8ylbv0v1vzBCWM6tK/VKoPJgIgCiWsbfpph6/hxRZSpySsY7kXpMm+gpbpL+UiMsnVnH8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.ba7a1b35.0_1613693687026_0.5879423504773995"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9a566dda.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.9a566dda.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.0b4a4b2eb.0","@material/menu-surface":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.9a566dda.0","@material/mwc-list":"0.21.0-canary.9a566dda.0","@material/shape":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"5093d1f8984fe9f44acd6597512a2de2ef5fbbca","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.9a566dda.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-xwpS+8kheEncbIIMq+sguz1b3z7A1bi2Aka6SUXSoMTY2cUKcfWHBm97g7/gOPwn4eVHjc496IXHESfD+6eEMw==","shasum":"de8a5c2647c8466097efecb115ecf34d8dc15f4c","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.9a566dda.0.tgz","fileCount":23,"unpackedSize":114492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMAXACRA9TVsSAnZWagAAgY8QAJAQKUyYjhGweh8xmdeW\nEyhWgrHoob1YDMrtjMFmHpujFhdN4IERzUZFfAhvWT6dY5GZ0gYwbsbdywxR\n3GM6cB+/2awvqPkJt2/PgBavCxayeHxImHSZycbPsDsDkLsIZL07u6HJtZdZ\nUi4SzzUCH/5FO6MDEIpFD2pfoDUby/isaWT1Ey3tclerr6OWCN+hdaCnrf1x\nzTYQi/CfUSO7nw0FOFoEcNBAnOdSvZEZu3FsLyTrXI6tazqsBmj+KuqBWAJt\n5FiLdUl8zClF008PC1yJjyLVWl6q/LFI0c/Jgw0/ed/Sxz7SFhhO+1ctS6nn\naDm8wFf2d/lrMmvIoYizTna+xwXPoExC+3o0/zsMca08mjvfaxYw5W0uUJWi\n+pg5NHNsS4QcP00nqUd/wbJAp5c1esm3axaoAc5PuiBr9UUV/jGfohg75Xip\nt+NuGcBttHbIq5nrQ27q6KrUkJ13s2yt0py0DURCrlWn4bQHOtV0oZZAmv53\nFA6R334r4Yvyk8xW8gsAZ+gD76+mI+ixoomgZYqZYieyNgYzIZkV9ui//rdI\nD7YOTKMGSrf2TVMfFar818qDTG1Aa+Oy5yBOe5uRDgpmPLsKtwkUhCwVJLTE\ngJKBmSGPCrzAXkN+hOxM1twmT1c5MkwO+iVwnb2otFloruPpCqSBIIQW+f+R\nM6Xo\r\n=uWqu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFOf8nza9fJalp0/ANuwMW7UhEhiGZjs3QG3U1J5GHmUAiEA6F1f+trLYRq5bAoFN7sb4KXPA6uvBTKU0wiTiyfR5iU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.9a566dda.0_1613759935789_0.0990547380392599"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.55addb8c.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.55addb8c.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.0b4a4b2eb.0","@material/menu-surface":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.55addb8c.0","@material/mwc-list":"0.21.0-canary.55addb8c.0","@material/shape":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"02634c071c90f7c1124ae44f34cb20a61bf49350","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.55addb8c.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-/+S348doApniwLs/iY04ReMCkMeEtEcsdvDK/PM+QIcNiLa2tP0rObZRX4KYT71tQYeqXy2JPcMVy8igj1uTrg==","shasum":"68119bd6c30dceb0c4a4616527ef29af7278859c","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.55addb8c.0.tgz","fileCount":23,"unpackedSize":114492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMDWTCRA9TVsSAnZWagAAO9IP/2Bcso9az8mihmhFmbyl\nlN2Tshr7xAtHvwAhn4fC67AprTVAAe1B7+zOg6xETuX9+OMomG6cJvrkc30H\nBEbh1GLIiZVCmJ+pTsRF9yYJ5JXvjnzb8Ciz/2xgUB7huDLKAloeC8pa9m3P\nShb9MQEgBqTHpLS/zgT0u5AJCHehZkp1WEMEw1VNuqa4h4DuMCoZ4C/zZxP/\nWpqkAqfqgReG0ace9+oYMAWofr04kKWapyKSS0I6CuCUtY00vRjXe7Dffu2d\nQW8K9jw044x6CNNUhe+bGStM+NndwjPLaDhWVfG2UAiPepp5XuTIU4nqpPtb\nsSvcPHW1NV6ZvsddHiZ3pJw8l13vGpHAnoD4qoupOQ7UXiImkhpy/E+mUYMf\nT/egoyI6a9CtRQ2iU2a42JmA+f57gCU4ag8bb6uZe13E3NZbZ8mj7Irxcnbk\n4F+8WAK6d2uBSts6a5v4YBeKqi8uzCXU2uoCI5IkKsY3h7Exbe8zdS7znrYG\nekCfJXWP/s+sAlt3bFtbq7IDSkHrL7+f/QjE0ul+RvOjApCtWeb+m1+MlsAw\nBb5OpRELhO6hVO84zWeMK7EazLcLtWnUdqpZhPuWNspRGAF/h4RshZoGVxRX\nSfN84DgbmUH+D4AEufxCDd3639L/CRmq5mrgrDEW026y5dQd3EJ+YJfMmcCf\nkC2C\r\n=6I4q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID19nFbjdxAa8OBLAVmBeWqOBK8ieIgISXgOE9c7LrjuAiBfE/OwmpEZvxf1iGN0BCaaDu7K4WHkXwV4aeZ/IH/xAA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.55addb8c.0_1613772178513_0.4877398070037122"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.85dd5e9b.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.85dd5e9b.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.0b4a4b2eb.0","@material/menu-surface":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.85dd5e9b.0","@material/mwc-list":"0.21.0-canary.85dd5e9b.0","@material/shape":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.85dd5e9b.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-NQyBZY22MaIBz2WLHu4cShb4mbZblEeoVXRiuzPY9ik1B9GBRopbgKBSRotyY/ISfXIwa2niKOFidRQYu8TrHQ==","shasum":"f7d98e217f9b8aed4ff162453b48dbad7f6d88ef","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.85dd5e9b.0.tgz","fileCount":23,"unpackedSize":114492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNGZaCRA9TVsSAnZWagAAM8sP/j1Epd9oiZr3VdI4alhj\nn9bYrHGX2HyDWY0rvUKjNAdZp6u9az7lfjHgmjTxCwtBz6HwpcGKmjlE3q0K\naZQ7B9dEjnOlVqH+9WyQ/I4jXwnQBR8/frQaQ9GZgewPSF7il4snsvSw2APy\n4J0rRhW//1o8govnMmhmT4yyKH/yTGEVFw9ttyguaHDFFYsUMta2hqx3xX3o\nM6tz9YCd3Tma2lNGb7sB863MMovtuZuL+KufuzwJQyJTuaxHkGeNj3JGQzSO\nJGY/Vuhqq65zoHlD1ME+Rs4qpTfNnrQ4+b0myjRY+DHbGg5P0vmfBBhkclXq\nFAbkE2AfqDI3yzJtXUoZotJ6lIUWiVhk10u6uSU6q2uQ8VNy24Ey5M7uX0Ng\nf21jxcho4tY+3LJmVSOuVk4vGfPLQFTxr0kUGB6l+4VBYovfAmrgzDbvPpjl\n1fkJMEEkosTPHvPKBb2aCKMLbd3kNZokdgvcGVfQvdRxm1HygXvHdRVNwwxb\nCzqNrELeDOaausH1GmrM2P6YBkVtNOglv4XN0NZQZE6uykFqFMa0PIzHE7AJ\nINB4y4ok2enFSMAlxxwfqYq0Lib3aA4gbYFC98naZhFyXQbykPlskfFVV6B3\nfq+HkR4iIOsgzWcvpY+0YAfqUKNw5pTxN242J8o29jyY0GdaD6gt1CztomVH\nxxqe\r\n=cqrx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAoMC8D15Io6mEWRMbYr5ffIBJLGIR5O9qcOQfyftA/AAiB8xE240lTZ/bFz1oeuS1UDjelhhIeCT+g5Cnk6y9g8LA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.85dd5e9b.0_1614046810314_0.31075790461005637"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.aa3e078e.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.aa3e078e.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.0b4a4b2eb.0","@material/menu-surface":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.aa3e078e.0","@material/mwc-list":"0.21.0-canary.aa3e078e.0","@material/shape":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"2acbbc6ed6d9f649621ee54e8265c9d26c49f634","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.aa3e078e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-X0SKLtkJbdzkR8vWvX5q43BOTZ+t/UDSKJVAa/NGFRN5zPJwP6jva52T/yrb855OaIzdd0XRmwfKZeW3ZehrxQ==","shasum":"99ac8746b4f0ec406a7e1d36eb6f58bd5116b20c","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.aa3e078e.0.tgz","fileCount":23,"unpackedSize":114492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNThMCRA9TVsSAnZWagAAmQMP/RvQXdpE/UpMUIOSJwHX\n1Lngg6fbtbkSq3DYCAjX8rc6bIrQgz+nfhiYA+S5KmEnLf0LlA0YXV3RpO5g\nb5xMKGZVQFUohPU74QBeuhslxnzXUktprf4IR+vGTAZd7GzQZJIG0lqDGBJ+\nnoWZzNEY+YwyBVeqJlk4sikNLQLQBn7KJrf6G+tjjQ5qGGhJQmDjL45inEv6\n7c47ssqwmdyKOU85oBm43QsyTKOWqpT4QeHYY5KubfubztI2Z/i8iWR6730P\nlFsgMP4Thm9t+Oz866JkDn001ojfxduhufefxJAP9m5D0nJ2tjQDU+vZBMXj\nFTg3MBtqh49piIO8vtKi592Mr6MJrmDDp9aSF9XqWhMnaU4rgzDsSn5S7CgK\nxKs5A1qAkzcxjXyFo++OMSWiDwS5Jy5hbvKLD2ekzpO8H3BVDDu81Z/HheSj\nl43jaaTqrdbpdtyHj2aHzyuC9mfOSXapKa2URvfrI5qk7BGZVwZbw0fa3GC9\nK3RzbzJ64YjmG8FalEFxf5zhecGmjjyrkx9lToXPCM2LzF09skf77QkBpXG+\nV6k2RdeQOmM3APrfUl4f6DirpT1lX3C86dBfj0tIz4kvh07X+4HJ+Yqxontc\nd7o7G8l+K6uC4zZxFTO7M2X0aWDRHuSLiUvw5fG5a9fatX79FQ6RbHx31XmP\nROdG\r\n=63tW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDuBzt/c1/ZZ9CYW2BDomO1kzunSamBubcDUbNbLCJCjwIhAJbb+jK9HgyAwnnxlDNEXHv2DTtw5EIAHfxu7Xp6ttnF"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.aa3e078e.0_1614100556462_0.4520833385706353"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.dccd254e.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.dccd254e.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.0b4a4b2eb.0","@material/menu-surface":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.dccd254e.0","@material/mwc-list":"0.21.0-canary.dccd254e.0","@material/shape":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"7c3011f1d9328f6405596f794c28c98485d9d40b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.dccd254e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-u6np3l7Ogooxl/HKIxTOub49SpNgXAZSA4ka+7vwILz6vquu4MMXRF0LkZYYL5QBXjhSu9O5kagl8333XXXJEA==","shasum":"d62eb6e55109201e6ab987106352d3be46d315c0","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.dccd254e.0.tgz","fileCount":23,"unpackedSize":114492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOWPhCRA9TVsSAnZWagAAGMwP/1DoBIfaQVewAhUFBr++\nqM7L3Rn4jJko04/J2eRtTlp+yLoUSV/mrHoqhGy0iTEvmbWRJ+9Detn7BpQi\nmd6UMR5qVm6gzx3qoDqooC0QpMTuMZ+7YFDLDbdNJuyoB8D+zs6MWJabotg8\nKeNEjtjhSeFFFFQAp9ybOQWLtTnAM3KzkfWVVN4x6nUOPY956n9hiNqfDiFS\n1RiKo/GcoUrkqO6ftjxaTU/9IeM7sniA1YaCzPG7blaEpujKV/UwAxyzjFKr\nlFxWwWwEsh/CT8+eof82+053Zur21pX1waYnGhW7oHK7NFAQZfs3DtJbfzjh\noqZ719pTDsw7z3yAoGzHEIqHZoj0mawkVswy3kLUGkefVS1NecF75BmcbxjH\nBzCi7R05o36zkErVU0iHgi5/T1352pZhAunDcEbROgNOU1Sdok3FynucdAZk\nZjTInjBUbL02VjFvwFSyUBV4Xhil3jMdzNM/+vs32YTpvz2C71PbAA8AyxZq\nrF1IMoIegaadK2WgCUfXJdBlytpU4ZYrg6JbAG5k+G65k46omeinKc5Lie6g\nqumo9pPRnkiX0aHzkSKMgG4YGwiANWskACzmLXxl6HptVuaFhQUyYgDOPN9S\nk3bAZVKcD64dnSvGsU9DWa1yEbdM4yGefZbj7K32EuqVkw1EWNHTNChku8Sa\nwXHX\r\n=vfyj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKHW0TOdoUPtKFQj/w9y+MMT34CTf5ehCDQjgCCu6+fgIgFT8vY0tXeHHUanu/lsnQpU95tEtxOSstV/auFx/+j+c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.dccd254e.0_1614373857459_0.5874511676476688"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7dd1a27d.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.7dd1a27d.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.0b4a4b2eb.0","@material/menu-surface":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.7dd1a27d.0","@material/mwc-list":"0.21.0-canary.7dd1a27d.0","@material/shape":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"15fa381ead1eb4897aa006da0f445765fa9a037b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.7dd1a27d.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-HAzfU6oe3NvTGM/6XKNJlIcbu1rJrTy+3fzTT+Cvc4AEwxEwcfJMyPcubAWeUFkyudxy4RSq6Dk4AQrsnwWxuQ==","shasum":"f86bd95af87a0b8b9d7ad641e1303772f496bb1b","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.7dd1a27d.0.tgz","fileCount":23,"unpackedSize":114492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPWRPCRA9TVsSAnZWagAAoaMP/3qLezhb7rbssVbj7Iw1\n09BJICzc0DXK4Cb+GoiOnlSkTi140MLh6q/BYtH7VFKnKU8iZpM4cOy50zjH\nRqfhng5Kj9ZZ8wggHYk5gGWIrG1bwq/sgpRk22nfWewSUBA1FQbOzFyiaSCP\neBdu2EMuo8HFPJBtzMYnuuxrf9/ZScLNJOD7+MX9dFjiEVIWW2a6c8hx2NEz\ntW/fv3kja4uyevNzeWPOTBFySt+JCQouAxf0f55I5jrAo/mqfakj2l7hZJFG\n0dTREOVdQ4vI88q2OGwT9OigaI61doy21rb8h8ygkpYqweo3u0jC7YxWtpYI\nGe9/6nn3uw7PlbCfpBfErt1/TFTxOVNP8QoopQ7/dLwEuQfVTk4I+j3vorb+\nRTnpNO7z5Q5OvW8YwxSzIExcb0Fpjj9dsb2L0BzzP8nV2zzn/plBFntQzQw2\nl9yhcx02yWCGjBvkflif3vbeKE683qYTXCok8xiECtgecmDUobtDesn/nFQ4\nQ5+R5GJCTfV4S1DMojMQWaK4NqMvLtSdUY5ZCGlERaq0WEJsoiWSdhFwOZ/M\n46m0EFnmPM/3rUT9LZAQxuZ7Vq0zdNlCbFTDC0IBa9CFxTxxHN2EfIrsO5CJ\n29L7CEKinmff5mSmOlba3x0jno9YbvcMnV9KZLcIwsP4R6smNkA7lvofEekj\n6eTY\r\n=OnE9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwnAX/b0RnlizzQ4bc/Vm+d0CpR5IxdA1fIFDgY5tzQgIgbFWktQjBK1/AdLkrFHjwZq4YPz4YoSWsidWyWj0O5Bs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.7dd1a27d.0_1614636110534_0.40962626218381226"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12574572.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.12574572.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.0b4a4b2eb.0","@material/menu-surface":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.12574572.0","@material/mwc-list":"0.21.0-canary.12574572.0","@material/shape":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"043d9159945b812192eb864b33d16f892831b4d9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.12574572.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-PzvXEQXA/nq/K63F/CHYeIEMPHYx9OW7k+MT4SBKqWpbROMTL8ZLYNVFux7azN0BGDzDO5dsZC1Go9KQXYHv+w==","shasum":"26b74b68e437d6dbd652870276e87e860bd3f9b7","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.12574572.0.tgz","fileCount":23,"unpackedSize":114510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqBTCRA9TVsSAnZWagAAAnoQAKD6rmnRVpzFrDwjiL85\n8Pe1UaqwswggSiFmiwyLm4/POBY3WdtcYnRv7L0DyMFPqt+ZtO0kNX7hqIsQ\nNmSR7/3kYafZW1JGavZeCNeOFqccd5TBbVjGc8VRqtKlJI25NyxcE62E63YP\not+8D5Z0ygmpkgRxygXOLfGgzoaKjP+YZQL/33GpBGjhG2lOqBLzC3I7rhlh\nfvl930LxjNnGbuKG5WYtMwWNKnwQSG/IPhmYnReMS/YTG37k59GS/cMyg9ru\nYAzCaYnuSYaXO4AEkGsPrT3REVQ/QoATD7LdxzjQ6d+WCBG4c8ASUbWMBGJm\nMZmv2lH/UvhrLPSKlaJIG7oS3z+JmYXhogehZLhzup4EiAjk8s0fNgAwEJDe\nsHj3VNlA4MZ3x1kZGu31WWvx2swOePuV3qYWZOv/aMOW66jZDzZx+cui9Mi0\nJNxG7CfiaEIvEuGXX8nHaKWBjDzI0x/8AkyyrqNU0x8PAOcoRB0yAoeIbWi0\nJsCYcIIzAsREjapUGeBZWy2NPobMg1F72qGcfGVTT3a6AW0Oei1Fyeh67Na/\nUO6UCo48mYco8xUtJP0Tdm4dc0L59dlX8LJv7GF5XWJr15r8EgO+waGQX7vs\n8L8qswGSK84XoEu5o+e423/LSzh7vAP0pNjM43WSFSDEmbtr3x2qX5IhsBjH\n4CU7\r\n=P5F7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFXSU6XrR8R8+yYeKOhPwcCbdctRZhTYurlhp1uT46vVAiBH1creKaLTOscaSuJAOBFT+pZCJVnPjoXOsc5j/q0UHg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.12574572.0_1614717011546_0.7982761706241461"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.1109a3d3.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.1109a3d3.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.0b4a4b2eb.0","@material/menu-surface":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.1109a3d3.0","@material/mwc-list":"0.21.0-canary.1109a3d3.0","@material/shape":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"8cdd512cc62bfc703a1cc766d67d04509e4e0c08","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.1109a3d3.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-Ol3+xUer9f6r+GpVFPbv01BVkBbcSuWV3FaRmt6SJoxkQZVbPrAQdxh4VRh40mNSU87tjbsvdh96aXLTsNZquQ==","shasum":"0d7f6287c4b3801cef1664d0e815c0e9967056fd","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.1109a3d3.0.tgz","fileCount":23,"unpackedSize":114510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqGOCRA9TVsSAnZWagAA7rMQAJEPXuWZej3EKhQ3B4fW\ncOixy/yhDdYVGXM8rXsLB5df3WIVyW36jKDGtHIJ2cr4mMDhb5NftjmUMPq8\nLKsHAuzdQAbw0dIPxYh3Dcxw6BWX+eZ1rK3jtF1w1H8FHVNR2vMcWkSxDM0Y\nyqGfYYFNRAwrMdylVj9DqNSujDJUqC5KRlds05fFrrHYFq24VFYT/7vXisN9\n/lCIOad1rM2hPh+WeNXDExE3QjZdLnC91uP9MeZjg4ePqmpDQ0YYAQG8bQhR\n7OgJRegpS2+7PcEq+TaYeC3+9pbbvDYwHoJeH2KHo7fmD57aD6kgNc43vjrC\neQDXYr+wnBgVEVV1ySjKu35ceVRzLc6i6u3Qbkbz6R0sfug5d8d6g10Lsr19\nusail3SfJJ3GT6xNhjV5MuoyWzYPLd51NMCq8qDfO+rX95TgAK78HVrYZ9gj\nlbPfCvTT4uLgtB7ANKn9uGFKoHd952jC7W97UBlT/jd27pqo41zO66asPwZa\nNZYPjQ7rbJTL/IPZnHYOmQNu8vCkAuUs2AA1LVNSmN4QoEdskmvfkpQnTBg5\nbyP/zTvT7LCdLr4D4jQSClZeTkbPtrfqRY4ZwtkxBYguVLTJ2aY97NeDPC/C\nT9SuiP+FQWZiXgtwVDnBbLu28sWCbfv+BTp7OG5ycvXyFceF45shhYs+SBCp\n10zB\r\n=CBxY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDOpB/cFM6VfG1XXlKKdOApnKCH7wUvqX5Wuh41cQ57yQIgIIrwxxD7/ABcBcm13ZNpU1Fr53ILFqhcFaC9RigXIKM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.1109a3d3.0_1614717325660_0.9519034495057761"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b9cd8739.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.b9cd8739.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.0b4a4b2eb.0","@material/menu-surface":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.b9cd8739.0","@material/mwc-list":"0.21.0-canary.b9cd8739.0","@material/shape":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"89fe0448abab4c371af17b2866ec736d9ebd8cae","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.b9cd8739.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-00uOMFMbeffW7MTf2ZQajA5H7u/Lr8Kgsyl3O5KNZe7XJy1dN6M0PLF7luAljzmEy8+51BU0X997l9TMKfdZtA==","shasum":"233c5696613ac53888e79cbae73950a43b4901a1","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.b9cd8739.0.tgz","fileCount":23,"unpackedSize":114510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP8wECRA9TVsSAnZWagAAnAoP/1l2fgQrjQXsfhXtmMrf\n37FImrm3zCgDR2JIxhP5aoHlXl1B/ZYf5OzX1ibZkyRx4uQ7iVAMeVmUbj2m\nX/PZwiHlskTICJvSxoOE1A/vZT1OyJbFMszBgQOqISuTxf3MNy00KzKEWABK\nHTkzMAjBAjDprFJnFNkykNEIx6jygZhtbnn3O8BeSZzBzKFu4O2yXs474x0R\n8L3jsRBPOfEE5IYiuzZ9cNph6/vaUa/u4in3/HeA6wvYLZgQM+79+Q2p/1dc\nNKYa7HzdO5aiCiLhRxB50YItrYjKJO/LjcWCRsAdaWMCmA/XvgAjMzWCt7v2\nKUI1U/jPMZz1kF5bal7fNCgpqwrKFvcNPt25xX00m2/CeGTLfv0cFYaQhUuT\nKKhkiaqGhOmkEBKekcH7TLUjzf5pwSPEqS9P631Z6pNYCR3K9JRXlc6kjGyJ\nqcSFeC/RG3jI398UYhd1isgjkqPsyhDvXhTEzfhXJAyA0v/zgS2Q4EFH5CY0\nyF705dssRc4O6INGlgiAXxLa+j23vzsQhwS8gfji8qjgnFjqssueTy2Zvw/Q\nyz82oDM0fpBKGqFqoxkq/siNSeYJi9b+yRMSW+9iemkpsBFIph+ouxUR1BJe\nFMzhuT8U51IKtlcYoTNdoZ611KNVirmRu5vGZ4JimDWiYG6VpEm0Mk0k9s5/\ntgLQ\r\n=+gEN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF6+RQqk21EZ3n/IIFDIi4p0TlpQHvTRv5jmGzq9BBt5AiEAyEFBJl9vgw0xE8omK0kJMFR6UJdWeuLil2vPHjJaVT4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.b9cd8739.0_1614793732076_0.7269272877264377"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.71ee796a.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.71ee796a.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.0b4a4b2eb.0","@material/menu-surface":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.71ee796a.0","@material/mwc-list":"0.21.0-canary.71ee796a.0","@material/shape":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"d989f6470cdcdd144c7021a4eb0ea47e63945cc7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.71ee796a.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-qRSqFqbKjpEUsB4LSpmkKnGqRwMI7Ru91UuDQP5z0aKKrI2wZvFRNHHkiFkQlAlgdEHUZ/n5wgMlTeLzH6feEQ==","shasum":"f4f3bbb454946a8f4e962be000ae7ad7dcb87097","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.71ee796a.0.tgz","fileCount":23,"unpackedSize":114510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP+2QCRA9TVsSAnZWagAA1vcP/3JaAbt5z0Q1TrBtxD1v\nUmVj7oeOoUCzUCxMYtM5xR3m6TRyRRw9YvY8pRYS7m2T2FK+D8Cty92KUEAh\nBb6nIWKjgH4gRilBOkIKbjK0D7z64EUrH0YYaMAmfU4ccv36IqsVGFpJ1uC+\nfXxE1+nKJjeyay93O/uqR6+Gmq+02J5nVtZ2TwRevdUFO4GZptn5M6TE+f82\neY5DRvT9c+zkqoPMAawW7Uof2odrGmq7sAWEA0ZX8mWtccPm76yQzdtZU0KO\nBOdE5etM5BokCtJAaGuH63My8TYmleknAh//M3AScmBkveaYG02kNe7Wsrzu\n2rxP53rUHY4vo7fhFZNb/m/E+MYiB3jo7jcxWfeFfVWT9UNpehj9y7O4WN28\n9pBnzGWJdkayLCSQM/5fn/+LDz8FqZH56ugNWnYgVi4gVfis7B2qMYGE8a0l\n56U1HPjdpsw7jChMboQUPMBHzxbiYUY3inuqdwAvPh6vC71feFED5WydLGMI\nqvX8Mq2onkazsfPemSdK0E6a6J0ax/eFiYk3sqRAPuuATLZdDVp5V7LuELow\nqczjXnE1C+XDoQCxYOPYox6bi8uzb2sfFqi7hzxtAjtQPG4F2IOmzz1go0lr\nAX+2UxgjtnL7auc7hwZ9BQEAo77NWR2eT3YY9b2HAeUUCRYHNUQhr8MMy/Fq\niNo1\r\n=6OPb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYnLgUYC/+pEejhCYgn2H++VUWwhDML7uCcZWG+FaMYAIhAPJqnXN+AIASmN3Yd9DjFd6BpZ0tv2kbAxEn1yIWpdc1"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.71ee796a.0_1614802320201_0.9041738281434388"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2be191ed.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.2be191ed.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.c7d98fcde.0","@material/menu-surface":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.2be191ed.0","@material/mwc-list":"0.21.0-canary.2be191ed.0","@material/shape":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"e273563187c689092eb053c50fd9b94385380fb8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.2be191ed.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-cDzdm8PZlNzum7XuMDFUfJF00hL/bCBjfJ0hfPB9a4YNY6myFnwhy1ZuXUNIwfFS96VZAoo8Q4yNQedoizETtg==","shasum":"ec773f755e30314ce68262605231f21a11664e2d","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.2be191ed.0.tgz","fileCount":23,"unpackedSize":114510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQAUZCRA9TVsSAnZWagAAYFEP/0fxjZ8qVsTOOHW0Np8u\nyjOjk+KNYaIltkJDUe16FeAFUKQ/QmDUxx1Ejf9wIS9rDCAY9wcSp8YFkUsM\nx47hrgJQxe0VBm8T/CE7tOLBQOAdi7eMXa8wohU+rA+oss52CKuONIlqkK6K\n7coH85yoJjpaFsti/R+s+fHJrsjR8Mz+ipHv7/YInkJ9a0kFY2LwcqgvLXIv\n5b2b5J0u6V4QdqRb7kOea+Q5ZnXsG+RT0n1FvTekVHizqN+RTfpm8p76VL6C\n7EkGUPRGIaD8a5B3jrcMw07I4EQg5C1vC0aGFlJCfW2h0MdIkUgXomdCB7x2\nM9eLDXs9Y3ptG5boD8zcsCPo/K7rq0fJQetWQC02ya0GSuZPwfekgjwXtb3p\nE7Ur8vh/cLmgl8fNC3PnJBXjE6xVdH0mp9tx1UHH7PECC7GnKCLaeTmDvkQp\nKqIxJwjM4DVQISSFDID7F1ABHjHXD85+XCJq/Vx6lmBYDILBUAJIkxRB9mB9\nIIih1g6y2vyO5Lr9mDu/u8oFkh+DyILObhIYlc1lmrg9oaQOHYGYLucaEeUB\ntIlSkXMnKETWhK23LQ+IIiL2wZqGBg20ncnEZ/wz0WMQXXmASdAsFLC9SZwR\np0RKuShcIxWc896wKQxw8GrZ1ztXLd+kCvf5/sVTXOckz/tyMEEP0YmZc3pu\n1dek\r\n=uPI8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCKCOIrwtXrLvpRd5j/iPyfYZNF+UOaGA7KK9iTGzvsNgIhAOe5T4rKFD4oKbj8PkIqeYezd7YvtM9t26or+byQB4md"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.2be191ed.0_1614808344642_0.6284349072578663"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6dc7b06f.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.6dc7b06f.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.c7d98fcde.0","@material/menu-surface":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.6dc7b06f.0","@material/mwc-list":"0.21.0-canary.6dc7b06f.0","@material/shape":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"9a8a072daac91e9fc841e2f6cacc0fb753ada76a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.6dc7b06f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-gKq5R/GHRD8rJJDDKC1a1u/A6gXWEZa+WsH0t83B1AIRFSNPMPmqIAJW9owlJkYLxJWKkf/gddnnj34kN0Yq6g==","shasum":"eb3eb0fdd2361b7c5d3784b38fb53cc8d18119b4","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.6dc7b06f.0.tgz","fileCount":23,"unpackedSize":115641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQXnqCRA9TVsSAnZWagAAm1QP+QDF0DR5eOlGe+0Wii+1\n9uNG7tzVSdW48t/IeWPfu4l2vc9l5hdF3//Ax98iXGS/dTJ2VK0kiUtIatfy\nPhc5wPcqdiLG818yENx4bD3e+rQ/eyQl4t1dhVumBW8vclfnAoYIMyuXSp/Q\nWiT7e25/cAG4Vjg1JX3XIcEFUoxK/CI1WEhvnWcrvtx/Q7YUqwcah+xOPulc\nFqCL3B9Tt0S3CUQvIolMnuJiLt9ZE6I0bj6ZXManLLah2W8IgFefb6fZ2uhZ\nvwQwXkbtCg3STu+hV66XQrWa0zlXo2ibx6aZWFnxGwGU4+8tBTPdIr6pG2cl\njMsC70Ray1AaES56l423m///NQHwU6TnkXiCRHl/UzfakdA/OiEQDoB0Tc3x\nvC8BeAvpu6Mkcj8sdMk7vxBle7BvSsNaCaDo09QPIpFWO6yMhlBcKFf2tiZh\nhgxWyToHAsbKrINHRMStxkhJiiexWRMxKohmc0R0XQhIDxbpUDOXh4wd31mu\nHKand8x6EUFIIuO23chSOJLVvN+2C6tHCXnBBBxbfO4J2nX6ttU6HGbEylup\nTTq4GpO05Y1Us31eX1rRQXF90vwFIl8z/2pMyx1MFLiLuxJHeHy5HU82J655\niwOTm3PkAwjaz3HHTP1vP52nz+eSFofcpf5X8KAoMd+fXTy8IJlVz6JlJDlg\nft2t\r\n=6b6x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBSD5P8c9nD/9+k9RxE7deRWlGRsmV6Fdj/VEkae4PuWAiEAnOH1xsoprKlDvuLLkfjaMlihpIuIlFmnmWlzKfaDHdo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.6dc7b06f.0_1614903786382_0.8754559515451075"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.24fe7ba6.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.24fe7ba6.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.c7d98fcde.0","@material/menu-surface":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.24fe7ba6.0","@material/mwc-list":"0.21.0-canary.24fe7ba6.0","@material/shape":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"d87a6c320af38bd078f91bc9ea457c0e21cea9cd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.24fe7ba6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-uocpPrTE3ni0btqJHRIEaYifarvo9likb+IrVtk6k+MbbVX/3zHe3R7WT7Fq4wX1Hc7gHcLz+O5WCydyC0MNMA==","shasum":"0f703378ff39a527beefbd535eda7d8d9885e995","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.24fe7ba6.0.tgz","fileCount":23,"unpackedSize":115641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQmoZCRA9TVsSAnZWagAApW8P/ist2pkd5DiqyjvMuwWW\n3x0YEw66v47VfiqXiWa+NHNm5mKLXLrYsCU4srZkOISs/YBx7KTlaTxay1uc\nOnAPDG7ymofkcvoVlF2GOqTFwDHS8jxty7OQMAVM06DHSGgrFBP1SYYsDQZ2\nqBz7idza7lQi9B5sqNBgzLnTHSDPg9oUzUEefNp9BilWJ+P/t3ofZ6WdzNYL\njDgJMMZ62XNbWoX1DtM/BQRA6CSRosBPB5ofhP7QZmOnQRFSGeWaCrqmqJcV\nVTpb6JxM9Pmi5Fx4SDALX/KidzjUbOTgs8SVSq9Iu5K4vlX/7iYzUlcHhcVA\nSiUJGL6w2nP2OapsU8zDK5Pgu3tWkyptg0paWauGqrYGze8LetNXgDQvFnnf\nv/s/R1rKHxQPCcdlPXVcmMdI2hRGPXdyJfNvJ7fm80W6K6xIvQLrDL95jXhh\nqMOxXrkpFcqkzIFGkPzQ35mk/KrOvH5vpqe0d6qqG04sFU3vPtS6Lxx9g1Pe\nnxCkPOhqRiPhRJGSbyN+9QDACE8EFYjpWX2iSnLMgRO3hfATcHXZqRvDIQM8\nkCKjbgDinBy/9xrGvkSvEKBM+IywTyygRNGP3wEZnftteh69+lOJOy6s7q6l\nGyFOYZv6E6Jxk4+Dgm8rFivM2b6UGHJj5lqkuq7rLTcG7y4cmFZi8pX9LqVJ\nRmqP\r\n=sGC8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBiJvCm9EOXU7qwKyQQEQo3mRBoNCEfo1mwBTNUbmDltAiEA7VBzdLxNG3OLvtQEcf1dQIvlOcu3OhyBi7ZjWg6juwI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.24fe7ba6.0_1614965272883_0.6718907183293907"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12c477d1.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.12c477d1.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.c7d98fcde.0","@material/menu-surface":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.12c477d1.0","@material/mwc-list":"0.21.0-canary.12c477d1.0","@material/shape":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"ea7731f325b77f7ec93ac77e442625ecf14e7f25","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.12c477d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-+ZpnMpe8/39cVyGJUmTxfP7MQOrS3sl14UqopNQlDj8dfCK4IiLeYsVjZcr/EBxOLdCR9EmISxFH0oDtdYWy7g==","shasum":"4876b8343faf307b4d693ff7cdfabde1cc4aacda","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.12c477d1.0.tgz","fileCount":23,"unpackedSize":115641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqQOCRA9TVsSAnZWagAAtQIP/3SmSHg8igu+AKwkbluD\nvpxJU/aAZDOxsKy03B/srSv0SxzrE3n44JlFIGInFYGxvx8Yl2bX0mUPHkq8\nOTZJ9eKVvtvB7dF/DM0xYWbw7dmiN+jw9NVUjBWt85BxoZNRO+gnmGJ5wdBc\nwr0s0zqAn+FrGaCbPO88ykMol6unvALP6DUGwmM1qEliDZD02FEcZqenJmo5\naggTfnUTfrf59KLtQ1ymJxS6LEioUCx7gm+sIHeEMcSATZZldD0WNEUapn4r\nst6Cp1ez2O9pASVLemuXmtAQh7vKq5m1B0wG9RJtRFJAsCU1KUd6A3pyj4RE\nZcSrTOjQq0WZC6wDsb8+YSWhQgsL6izh2xsQtsbeLMr9DaSMaJ4fs/koqxOb\nezVRhMWA7dnIAmaBK9ynxPIK4MrWXCCIG/JmEcH7IsmkonQmOACjt/9Ti40d\noXX1PD2/OeurZMVMpOVmb6F83DY/heGmOHziJYCLTF3DHpKijDO5m9/aRj9e\nqU5FC27IYrvZiPAGawE4QAArbNPHpQP2L8WOEtGaOSLXMrngJchIWDE4gtdo\nHVTvF1rVep9LWd4NsUw5vtD2Xe7S3u2ZQ/drqj+3vlhMFNrOS73n4TGUEdiW\nbHYm/xvVvuvoaA9WJsuYmVGMlQRzvg5PBrP2ZNM1KgBInkrTroCyB+zVUc3m\nzk53\r\n=6a+B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICGCH93YkoJPEtZlK4jrlcNbiGjusvXkoqIxQlw06601AiBKF2Rel9A8YkCd8UHg06gjC0Lu2ViXgs7P1e/UtCRkiA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.12c477d1.0_1615242253582_0.10063878363820722"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4c38f801.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.4c38f801.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.c7d98fcde.0","@material/menu-surface":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.4c38f801.0","@material/mwc-list":"0.21.0-canary.4c38f801.0","@material/shape":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"2f19e904d6306b3a12d41b0158ca0c3fc34362db","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to false.\n| `close() => void` | Sets `open` to true.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.4c38f801.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-KiN0URrW/slKFLyPYb4Kg7onlzv08IsH+gLT388sx2mu2uUPgp3k6Ij3gpDFTqtj/f29OVY3SIn6OBbzt45inA==","shasum":"1fbd996215126bf298f4bacf6fee4f138f5b193a","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.4c38f801.0.tgz","fileCount":23,"unpackedSize":115641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRrJoCRA9TVsSAnZWagAA3PIP/RdeU1nSXNwND0LyBFpD\nR/7iYGONRzxazxdqt1GQ1LpEc5NziTaz7ZI7/z/3CCpejwMHabiekzVf3rol\nxlitDdpo23XXwooPX8wgsxDl19ADLcNMhzwDh9LuE0mhe6JxgRKu05EhnHiR\ng2MEvg6SympnhQckTPz5hTHNTr7hiKb5oyPPniDC3hlmtw1KfY5Sq23thMeO\n14lnT5G1AH+rVxQcTUS0lvNr/6CPQ2ZHuVYzKde6MEalYrGU8M4v6N44RaOn\nWWbJEchU5bXUJ4W84jzzdO3UiY2qwDP4RbDpktPV9/EUM+CcUouwQoDxVgx1\nPxkYqFVJv6mY2dWPysyW/oJbPhJVVxLpv71hIBklBSfze/nzlaXKm0KfD9Ku\nkh3Dwpk5d7pmJhtSu6m6x2xzBbfOHWcXo2V3fjLrqvsaJYS/e7RmfyQC3Gzj\nrzs3yuhADQf1tnR5DvyauK3LNoH2cOvsfWzAn7KevU/lxF6C1ZG7npfnTJ0L\nLY19aKhMFgNtU/IydsGpDg2zlwKGPbJWptYvu6NffET9CiF9gbKGCgHzpQCY\nYo0XIyJaTdLdFU1Q8GxipsMOB5TYvd2EHrM9Wx6576dBjBKaYKPY8apZPUU6\nTxI3DPAKEuik+ptHheU3Fx1e/qWcTK7mswOG+UD/oR2LwTbfrdM/HAHjtrX/\nlUwB\r\n=qkMz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHvT7gHwMoli8td9yN0z7CStaUDvvDurEz1Q/wxMFH/hAiAnQdNOP8KYt0ilXTEwk72TKkpkPIM4gMPcgUGdZRY3dg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.4c38f801.0_1615245928501_0.9647700952502472"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8795b83f.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.8795b83f.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.c7d98fcde.0","@material/menu-surface":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.8795b83f.0","@material/mwc-list":"0.21.0-canary.8795b83f.0","@material/shape":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"e3e75af3d23a6f47c66e86d2168ac672364726c5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.8795b83f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-z1ffHImuF9eCl8SALrIITIIe7rdHHzIy5D8SYuCL7dy57Iy5N+Q+tJ+uStrg+fgNuIndLb1gCZSlTSC5mvIRuA==","shasum":"cf6fa88df3ee878fdcd075f79156b11d3b0e6034","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.8795b83f.0.tgz","fileCount":23,"unpackedSize":115641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR749CRA9TVsSAnZWagAAQpQP/0zlgIT4djnZlSJYRO8S\nllMf7SOouiUtRQCicwiijQl+mTg1lTWoVcUSzwXOC/d8pnrz9RO2KuCv8x6F\nsQyp0IYebkWAD46t1Rrbl5rahz1/P07AV5daQmlmnkne7gt1QeAjLarr9eM4\nssHD//RexSZi/dbdk1xZYExicrMhIBqqYr9oAXin4A5f58TfQbDkPv5fkE1/\nlNK8wutrSaC8+g5K8K6ZD2rAdOXTPtOSRSFk3GgIHQLrAxKKfQvvEUpxK9gP\ncl5l2L8uGlNsAk4C5BObIlFjZoYogl1j5wRcKkrnI57VZWYJSwg+aZJUaR+/\nXJaa0hCRbujUD56DMMuIaD6nudVUaOvOT7xBP7lDfwc12UJdx22tnWqIVZD5\nAKpMevGUVcBl0NqkeX7uFnUj8E2IUNAH4Zm+YzkvUdER3JSjxFmulRHtBpGr\n/5A36jBq1hto2hcOUUHKMMRT4YdoZfpjY7hRwBcdzwqhdGlwOa4vECJPmIfz\nMAc+9yK2WPSEBF/DxYoaJNc9TKVn+TZNJ1Z4ireoW8J41ix/YR0Dv8UkodqK\ntyRCKQZWlg88OQCdRVkUdOiy8W1k9hehYntLtJJv7MDDeNdPHSiMZo8jtYSl\n9o9BiFer4VeF2ypnhN07/b4FZySCCtffJB09uqBSmojqZUAwM6pTzZTXlu8Z\nuI01\r\n=cWyt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgIRUdF3W5naYtZaiF4pGxFOSKrrblRUUGcR1eCpAW1QIhANWbib9LWNRZEadGfwLRK6FXwz2z5CzIg5KEVx4P76vm"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.8795b83f.0_1615314493147_0.576394232484291"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12b84cb7.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.12b84cb7.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.7522dcaca.0","@material/menu-surface":"=11.0.0-canary.7522dcaca.0","@material/mwc-base":"0.21.0-canary.12b84cb7.0","@material/mwc-list":"0.21.0-canary.12b84cb7.0","@material/shape":"=11.0.0-canary.7522dcaca.0","@material/theme":"=11.0.0-canary.7522dcaca.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.7522dcaca.0"},"publishConfig":{"access":"public"},"gitHead":"1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.12b84cb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-4yKUfes71KXKOpsYw5qcjzRABk/UdQ79dYQHBD46VRXdULgGwsWk5t/PWnG+dARPZgEKWv9esqQflrItmTlGZQ==","shasum":"a48127ec3c7006d49413173a05fa8ce77721896d","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.12b84cb7.0.tgz","fileCount":23,"unpackedSize":115641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBXTCRA9TVsSAnZWagAAYUEP/jqNjK6wX5hhgEaMOKMF\nurCu3qnCUdvggdu7A94Rgwj9jPgJmgumleHlwFUKFt7ADW+k5piGiXrVWb5t\nyYjQyc+hEnCkE3imktTzOVslBYz3DDQ+0RKlrCb2EyKahF1wxPgrtPKW1057\na6QNdBsBPm3pR595kE+9UdydVoLyT3RQ1IZjLPybXc1ApZm0JIXXHBcIL35p\n7Xmd2BOArXJJ1D1WI+y0RqdVazh/LOjkbqvoNZP6A55Bg0PtA/oOVurV2C8T\nGqSlvQTugW0IuEYmH6g7A0Doj0y+5tH5bpJnQbVmGLUaMcI2/FBKwhxa9n16\nxBTHndqb8n0TL+WTraDT5nUWBnUmKKce8oEsbmRjRZtbS73qRoxUxs6GsJGG\nv4FDQ7S9WYnyebdBSEY8fkcsomL4HbTFO4uLjpwF0n0p43qEQ+dO0LtafF0f\n+dLcFRUuNtZRI7t0svmBDuIizrRyM/c5TmedkhpPM9Z67/w4oGAY3yFMP97G\nZ/V7X/C/KAl/LmdrxoSEY587o+mVoUYS9si87NXzgBWqGdoKz+BtMmtP1IYn\n1xBBY0zVtjNhx7hle7EyGq6I3LBUIY0QBBW6Zrr4FjqNbslpN3/Sivhndhrx\nKbYh4mkDuEqdl58owYjC3JQTG+5pZr3jzvRa8i/IRyuqv8EUJta52tiUZpEp\nlR57\r\n=aV/b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdKKDkPGASZagxjnv+SwKBxmNxnpXYr3/6c3aJWCfJAwIhAI394dMX6mOIqiOLSCQCQObl46UPZy0vZuTuj1q9n5Ud"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.12b84cb7.0_1615336915345_0.9912922252311351"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6ac6784b.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.6ac6784b.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.7522dcaca.0","@material/menu-surface":"=11.0.0-canary.7522dcaca.0","@material/mwc-base":"0.21.0-canary.6ac6784b.0","@material/mwc-list":"0.21.0-canary.6ac6784b.0","@material/shape":"=11.0.0-canary.7522dcaca.0","@material/theme":"=11.0.0-canary.7522dcaca.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.7522dcaca.0"},"publishConfig":{"access":"public"},"gitHead":"c60d8f8df8e8260f94f9e15fccf93afc356b0634","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.6ac6784b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-neGmfwnRRI7UIVtJTM+RnMcAM3VSvxSeeK3cOViF4twChvfngk2q44ybWVUp0dbZLVb+e+CnG7pU/o97b0uaHA==","shasum":"95ffe7878349586d5b43580079fd28a05cc27458","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.6ac6784b.0.tgz","fileCount":23,"unpackedSize":115641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBhFCRA9TVsSAnZWagAA8IkP+wePO80hBxYOgND79upn\nUsKCc0AcJAehs6kbI44gTzm4QUAEeefdOYFCjlgftP7G/3Uo/CN6CF217+HL\nkIcVvghS/g8MwYr5iXJI72CvYkPAxbubKV8tGO4osuoXuqa/GwCxPPuFCK4i\nN7BPN140WVNU1MJE1t68ieSt7n94hwHGMxiAtk54WeIcV55OfplUyGSZAE4h\n3pGuPCNCfIhEGUZr1r+qZaQ5y6lbI23qfmwhDuzTnT/+kHknN2fxnCKr8ZmJ\nBbtuVZERCoa12VnF68MuOCzYyLvfKIZDfCkiUmGO53XOnsx9iU4QTgsDmF23\nGgsaCEB7NnqZhkZCOtBMXF/9dhCDLZG3H4UZ/+MlyNEwG3lXJ/PCeAfZFhmj\n7duF/a43x/72zOAhT6Yf4KO32lJ+cD3PQ+UeNrhhsJTIfd4L+OvUyx56Qzq2\nXgdx0piFzd79FTurBWTDcK8wTR3lOYpnksjMVlOV1rMXuohrcDDe2TuDvFCc\n+4M/H9O2m1AsCi51MUBs+UKUCbhis4S8jD9bBEeuvLrgLZ1JpWd028WO+i7B\n2OA2QF34Bo81hiOu6yHAvqaH1E49fjap36q87JbSyL63hpWPWQdfpm1HULVv\nnASwYYTZtg7Trtr6DwEpkVNJXQxq9HjD6Z/IAuX+VtR1ARUrQqDoIslz8j+x\nIidD\r\n=ypDb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCiTRFCp5rZDIrNz0zu/in0CbHfSEXQvaB2Qt/g1JcUqAIgFb1GiukFTpgRgX819wxhubCindfNF1xYSx/yhFDsn4I="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.6ac6784b.0_1615337540752_0.4906985418367107"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b6d92934.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.b6d92934.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.59010b6dc.0","@material/menu-surface":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.b6d92934.0","@material/mwc-list":"0.21.0-canary.b6d92934.0","@material/shape":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"82c48b7f335ed9103a3bbcd062d3163b1eb661a1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.b6d92934.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-oIn1I0E+8fPr/aNH3FxWY5ohx+e19sUg7NGZufqmn3qE/r+cmZMLQMQ3P10SHzV7mXKI5CbWkH6vF5X1BQS9VQ==","shasum":"5a1c85a40e052eb0dd4f717727fb386f700568e5","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.b6d92934.0.tgz","fileCount":23,"unpackedSize":115641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSUHGCRA9TVsSAnZWagAAnKcP/jPWOqw6Vwng1asJUMoj\nSaY/E6R9nR157WSrZL2cAIIhgjyrJlIOrS6SZZipDelNdDxwqCqBrve0TiXp\nZXHwt4s0Pjl8BeT1ljhgaZ6WrBmgqRUlWZ8FT61VY4HJq21qMLG7xKQMTYgE\nRmaO6s36hwXzAs3gvJzdHYBYBYHrAOKLn5JpiekA9PKjPlLHCNg1c5+50GVm\nBueMIit1rfIfdv7giY80VMXDikBsTlykyR4VsCsynIsszt6BHj+GoCWlhlfC\nq9mvdj4TQ0YxQhKdNOHWLCXMufHeVtfxR/jKYnIXesJfexYeefsgCI7rbFVG\nKXutJ1RX7v9NkBVSYoSZtOK9OwkYhw4umI3vLUMgOyz1isb0XrX9aOsBke9L\n2bSRCh/qddBUZQEL4pM+Teq8VOXfW/vLMuhlgM/i5fsnaNyTG2cDI2YNLDhH\nu/hh42OhgtBwmMSA+dxDiwgQMSA0ZfkhAHOQ2HZk3zVErihBXhz4YskPRRJF\nAU0iSFW0f9IqgPXsIyK6dhKRSWBQnVnrNZbCer18f1pDTdxWJa+Q2TOK0k3O\nRrb+je2E1/KTs2lEIFuhfnjuzK1ZL19GICEl1KWisVTNDj/WlYjU4hymaRFT\nSN7uY8Af4yGFbHLTQp60KzDlp3n2HeWevdMN3kuKEFl7S5j0GYRsRFpR7ydq\nzWfw\r\n=pohx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC99klumkShIgxWRl0vBzetMTXOB1uC6CDz+QkdkGkKiAIhAMKTlJL8b6OrggwvdUVj3p5Idup6JJM/gl3hsTbzZod4"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.b6d92934.0_1615413701902_0.7390222451768658"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.99a55b9e.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.99a55b9e.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.59010b6dc.0","@material/menu-surface":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.99a55b9e.0","@material/mwc-list":"0.21.0-canary.99a55b9e.0","@material/shape":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"8b0d740e8ff12f180cf11caa9a264f3dda6542f7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.99a55b9e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-DRLTJzLzt+zP3BEdlS8uiCuAnTCbHxxVcbSm5mpOMkhJwRWLy+If46I/bww0hXPHK/FIGWbX/Py4X8CZgpSDmw==","shasum":"82406c4b1d4b6bb42934c2d9af75f6506a19f747","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.99a55b9e.0.tgz","fileCount":23,"unpackedSize":115641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSU2tCRA9TVsSAnZWagAA+VIQAJ1CKM+KH0wq25JmdXfv\nOvevtoFY3VpFpgyEoecubkqdZG5NeThy78LLqLSjUDi439Auk9KiJqK9/LLp\nCReHHfR/j0Nw2uTTPHkq/4HJzTCUmJunYTyunHkZYk+HoY21DzWwnxjwsv9o\nSfgpTTyj2qlc1tdXOtP6wWOox2LnM5ZX3sjWFWXtfqoeUzB1LkqvOXyUeOIE\nXKUJCvKvkKl3s+c5ZkFn40FNjBA9327yDV2t0ikwac2XZ0Kmt5ByMOPnZ6q8\nYScXzLWvBzdUJRtW0N/3Xf7x3qrYyYVX5GaxE78FTEf0KU/e3ne+otIzcTUF\nlJmRs2HiFP8mrSp9P3KTPCSLMWUQmbQuBKqyd9AkWhOdz7eo3xyrL6D/tdLZ\nDRWHMAXJj0kZYyyrgN84W6rsPPhCoKE21rkwj5rAtDqAeyk2VemQ8v4/UDOg\nlMFQJabeyeG1DVxl+nZ4YqK0sXInqMQXY/31+7b1jtS1RUnOoDJPs+RbR+jq\nyoaZJZKFALcxpXgak2Y1Bn/XNWkYiYPByQG5uZF2MAS4bzLedW6CYty4Q6ET\n0vrvN5e0c2o9WETnCg4cIkqxqhULHl6BdwOsWvinRcE4rooODxo51Myl2/2C\nW4piot2VygYFwUWbN42JR8DAWBwetarVQVn+3+eHLhKny2oMMUCXoe14Z77z\nwpQH\r\n=NDNz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDEncC+F3lVQEvor5Vol2fBGrKX4bKITvdCVpowK8O+jAiBHNAM5Qo4MjmzLNhnf5d/CU3wsHwg8ygvxFhhtlSuhYA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.99a55b9e.0_1615416749304_0.7586009357059982"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb14efb7.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.bb14efb7.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.59010b6dc.0","@material/menu-surface":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.bb14efb7.0","@material/mwc-list":"0.21.0-canary.bb14efb7.0","@material/shape":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"00644005f58173e15c7e271bc9c226535d1bbbc7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.bb14efb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-5ylRlnneny52N9dkz/Lc+PS9qbBwSqB/n3QK8i/G4MJ4MTFdkucFOErJ0nRz1v3XLNBsenBTrk0K7snhrPk2HA==","shasum":"164d62a7477b642ad3e219d2cc088f6914c66921","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.bb14efb7.0.tgz","fileCount":23,"unpackedSize":115641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVhVCRA9TVsSAnZWagAAd5wP/iecQBuVQlt12vIKNzBH\nYfr96EYmazzygRCnDADlTnkd0IwKA2e+v4hhNT7RP3dtchcI4+tT6ZwXVdh/\n3HC1W22kIvjBE3Bj+rrKh1bsM63l2Db5w8LFxwDv4Z2edz7FJQfohkhLUujX\n01C5PUMMseS7Ru02So/sgMLQmKAtP+17DdkF3nIgGUC234h7tUanHwkGbS1R\n4EKU7VFMVOWuMkHefm3k1ivHHwv8Kc7siUKSQqsvtdfUeIxaJMQYGF6a0VJk\nMQGhO3FM3faiBQVyzBW7uydDtnRzETyzX1OBNXvznMzRwnD1FSwpQo4KagLa\nkpCchyAHovlVgEv0i8sYw/ppVwayhmJ36oY0SmrwZBE+ElenCjVZqysWtEGW\n5ijGDQOOQSA7w/uP094H6IRcBuBZFg16vxbidmrKrv0jZhS+h5LWBs43Igih\nCtZmo6/liz0lJRKa9P5IWCJfPWnXKcabFTQ4zIpllrmBghe7C5rZrBF3Yg4O\nB89xwVmODGbKzJ9gr0J5rwctRq32efjdDa0pFGxrtY81OhixwHvNk0WcZ9Cp\nXVUkZVBer8VGPp6MRaLCftpCyeDQlE5fRfXxQQqkMjBkmmw+RcHTlavLENqa\nnONh1nbP0Y8ftvk4GJFHj3oAPezxdNUSaVdu0Pyo8T4R3ilGOfwZmMTGke3a\ndPzF\r\n=Sr+t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFzYfAF4jU++IQ/WMLyJ3WJjx2pRwFUM94X/D7OO4CRoAiAL3bTL1N3UPwTE741UfrMSLMwbuox++SBc09LxG003JQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.bb14efb7.0_1615419477387_0.8475310872277582"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ecf3bdd.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.9ecf3bdd.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.59010b6dc.0","@material/menu-surface":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.9ecf3bdd.0","@material/mwc-list":"0.21.0-canary.9ecf3bdd.0","@material/shape":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"536269b5f421223a32dd73271ba878cee3e04ec0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.9ecf3bdd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-vbZyZZlUDbLxXUYsgBSjJcKC5FxhbG3HkXENLoMeurJ8DF/pZVgbQzVT1u7mUuBYyc9pNU7rcya1qrLBFXOOPQ==","shasum":"36bb85e2b17a4d3199f35c8fdee4fefea505207a","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.9ecf3bdd.0.tgz","fileCount":23,"unpackedSize":115641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSWM/CRA9TVsSAnZWagAAcHcP/2xa7CibHl52ECNZJq6I\nwgZ8J3aLpueMagoL55sMklmAsrhBbdeXuRzCTtMIQXq1R7VRlQGsN2EmyGQJ\n8ysVYG7MTlO4FrF4HViDYcwstazh/I5n2xE3Slq0Si5HJpljthtTVqgp37zh\noVAbMbFtopu4+rBlZPJcqFFNn0pYHN/HuX7TFaktN/qlh4YNGOq3TnpGoS8H\n3AvSwTYfbvM+x6tMlLcw+1Zy54Zm5OzSFHmHt5+4pn6AVTeSWi2NqITNSBI6\nhoX7MCvxV/a2reYWVGXyjrBh2V+sCj83NxW24Vt67ptvdW9LrSZ5jYPWZUH3\nP0Bc0o4Ud4/yw4BhteIiT7mO4ak1MMvSDjLgsN44CrHFHcKcBjgjOagwV3nn\ntNfwVhvGFaiPzkSFdQ6iUY8Hc3pTBt4SphNldyJ5hYgRFFSHSrXKpEWoJKRg\nnBoqhqUNvl9kXBwVJNWcNaJK0f1HufYBQxBerlLczeDWwKmPebI3NA38gJrk\nbTDin6P7JLlgBBQ/B554fGWyR3BSzmiv82QXcw+p33zVDAj1BVBq5Ob88JRo\n02I918ioAia8VcdGnGgDU6sL8/z/BhWrDH2PzHtGHIW2jS/wYxZCMt41lfM4\nLE/WoSOXJc5nywy3318FqI6XzjvkAtfVIY0xjVVwjMlZ6xHMTuLce+tMCZIW\nz+wa\r\n=I9sR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGrpaRvy0ABS89nqgktXvHdLrOt5Mc5DWlJAiuW+5iTQAiEAxD2gYCTFQsiExJAUYrAT/ZEIa27bdJwSJkwFxKIhQ8c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.9ecf3bdd.0_1615422271384_0.8474492101330868"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7c0e02fd.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.7c0e02fd.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.59010b6dc.0","@material/menu-surface":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.7c0e02fd.0","@material/mwc-list":"0.21.0-canary.7c0e02fd.0","@material/shape":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"96acba80bdfa05054613c4753b3c0211e2ac7a76","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.7c0e02fd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-h0JGMQOpfTFdkORN28UFksMXrBEEZ9WRNdyCwuOpXDX7WPtviWta+xFWASGFEfAW7RUiRTG4K59yoh4UWSti1Q==","shasum":"0508fe79fed810a51df3dd1618ee07f27ee17929","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.7c0e02fd.0.tgz","fileCount":23,"unpackedSize":115641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXasCRA9TVsSAnZWagAAeawQAICHVvFaN/eyX+SgMP5t\nv3NoVKO/bIeeCi/VBWzFec5J/sJFVVYmTDLMXHbK8RCLWNz1imPwCea7PeMO\nZ8QlVXZlZM06t4g8HOovLaqLHs79pvPaHvAEthgEWr8OSjGi5uBrf07DWvAz\nMkNG5kanPxoNVX2f2e0crD8Rcu156n6Q40+im5OnrBc2v1dqdpG5Igk+kAu8\n3urk+UufmgYG7zkbnXzHsEZH6nRkL2l19cSYSgM5T5utdZA9IJPWFoksqEfH\nLL2yqY2CiZj1V66fUNkX/SALi/4UfpjKE4XjKN4eBzVzedD9B/+dj8qrVxqE\nfhyBp5W50wFfC8mDrki3AS6k2sDJN79sRWuKozLz34EDSJ3RVKENPwOpJND9\nPjzQ0XTRmlKvZpScDBD6SSGq/9jDRBMQWZOZ9LNU/59Zryi42MWsTN5wfYic\nP642uzgZJsnEUwswCfLm3oA+H4f2788hOYYRhwtYcHRclTMyHi7yn0oHPuve\n0R1hGG1AFRzBVHIFlw7serJN09JARP122n7dWppSsT+/s6UKPCcWfoJ8ideR\nJActUYjRI8EXK3U4h3p6oaByKeo2ohfs1S1QCs9ObVzzZOtHVMrAE7fWvG7y\nv6tNhR+vXzhTagYo+uZEBPwVNpechgFyk/oNmwhmd1Lyq0eh1wwmYMgela77\nnuIA\r\n=IGOn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHQqt8MM4PlwnqOMjqQ7x+U6tjXb3GK3gkN2pAQaaaqMAiAs+JnhqLCHcSFFRJzFyTRSX7lrw/U3hYw7EIYxocIavw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.7c0e02fd.0_1615427244490_0.7789204764508033"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d6d59cc.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.2d6d59cc.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.59010b6dc.0","@material/menu-surface":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.2d6d59cc.0","@material/mwc-list":"0.21.0-canary.2d6d59cc.0","@material/shape":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"52ad91ef80e9719962d213826d84928a37cf809b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.2d6d59cc.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-A6iRy9j6jooL/TUSnOFtr0qKpW3gFHHosYfqXGEE3NePUh8ASbz3STXkvV0vyILmnV4Eiafjf0eTDPF0aZHI5Q==","shasum":"492ec046cc3a9ebfadf37e55d305413a8ea77104","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.2d6d59cc.0.tgz","fileCount":23,"unpackedSize":115641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmG6CRA9TVsSAnZWagAABz8P/38k8OvXyWs+mRUhuTF+\n2dutnTkE7lcdt2ATX8PJ9XYa8jea2g6c+B0nPpnpWTmABYYzxY0BLTvXEp6S\n+QHZBS5wpCavQwyf0nDDavPLe9KA98y+Cj853SjBsvtFiJiBJ/lw74o3H16w\n/snf0NZw8slbCLjNIf7eVo4ftHUU8cM9+gzi6H97ivu/RiBDlv3LM2WnYeyK\n//3SjJxnivs0vK/OfsUS/gGL4nbq8akL3FjjrcRWJhvZT3g9dtIq99lQZlGM\ncIhCdRmaZGDpV6vXX9r7TTtzQGv6+Hug/DKtAgmyYPF4MoBFADZqLciv3yYs\n0H5zU4IwfSf+pCDV27B4POxaJdJ7hu3OUVjaya59EiYUraIfFfeERd0J2ndb\nhc3qj0TIIqDXjDvyD6D3TJddfcSrSFR/Iw/eb4x2n8BCdctpA5cu80jgBML1\nnxy12H1iKZEmuXkfOqCAO9f9tOUh7yyZ3soBrn+LoSbxuVB9EHn+cYEN8fkn\nTRkSogP8gXvxGJcjCmBZn6gKJ3nOHLnCW25DYAvOXHM2CMemCLPHKArqKBps\nGmG6BmKvL+FEnIDxRo2iTqSNQoZRw1is63bw8d1dBX6hQs8cIv6bm+2CvnpW\nvUmsHJw4iFTekECueWkrGPbiB7DWg0KUSULXybzveNDTZ+R9Q7hK8DphbFuW\nr6eK\r\n=KyNh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA4ZUpUBvC6HYPpBMDjHWsDVO2RAZn2Z5lWp3x4KGUB3AiA1PXMQU4bNrrTtKhHRDjg9Amtb/4HZEiVa5atbMomH/w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.2d6d59cc.0_1615487418041_0.8660656079191609"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0138863c.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.0138863c.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.59010b6dc.0","@material/menu-surface":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.0138863c.0","@material/mwc-list":"0.21.0-canary.0138863c.0","@material/shape":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"851518435241b4315820e91765f5b26a5537c63f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.0138863c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-kzfpttxV5VlFdZDVjxU2X46jY1QkpDTRijOZUEgV0C7cKAAgs7RV2Q6LW85IfBNmHFIGd364XEP7P7Zr9vTwuw==","shasum":"a70f84364ddf5177c76cf614bf4d4b477368bf17","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.0138863c.0.tgz","fileCount":23,"unpackedSize":115641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmN0CRA9TVsSAnZWagAA7ZgP/1402VNsqaZ/1SqmsdfH\n/ztkjG9Nf6wWszgRV0DLa0CqljhRIElLg75jZeTQPYJLgwCmSVeXtd14Kxst\nqApfHR7UzBXLGC0sVYnj4McbzwGdRFUNoIPutgtQA8v+1Xj+PAXRixPDugl+\nHXT8hWN1PkuV6kRpjikf/UP7UnRJL25cCnDgusKyCkGuvW/IEHL6apo3komG\nwVWAgayKHKj6X/M6ab+YajylT3WjOc2XDGzE2FuZOomHtj/DcJ/kom0BqLtS\nvi5KThtwHvsymg/tx6x+ha1g7zKez0XtBZQSTYUyCr5g9F4eiXDfqdgR7OPH\nYTROcAm278iZezOx/ARrilNKNQSc31RA2p7DbFaDwGUae8Ng7MiF5bAXgxav\nvJPRnQCYqjDyZcX0lj4gBpnX6k4CiSOpU9wA5EZ0HGfTOPxRnqLVrLFVIQH+\n3Nta5HCNxPh7p2GMYFBKXi6AeWf7tT22KgCXHgNMKmss1zgjTPYWDSMDw9fB\nQoIEpPQ2K/U6SeLs0tmXQZF5rpbbJiL10J56aoxDr17FVtQeqP/uJanKmtTI\n/xpHVe7jcRVnYaaZtzAuykcBbUV0DPgCZeg0UN1U0indatqbICk0nbk6Ic0g\nUc/CRvvcmUIO6xlBSnB/fFt6sFoJfi6uVUjFZj5A9vVpFwml0tSWhIGj0iwR\nCoE1\r\n=7byU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGPdsERs8XgCbu2LWPKmXxyWANYR9DXY4JT2ZQ/nPztqAiAjtYzXyTxSDlRYw383gI5ScsDwYQdRfnoqshOLEYjFmQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.0138863c.0_1615487859875_0.05314152766181812"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.926f5bad.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.926f5bad.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.59010b6dc.0","@material/menu-surface":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.926f5bad.0","@material/mwc-list":"0.21.0-canary.926f5bad.0","@material/shape":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"516a00bc24de904c4782b3d5f4f0d285b7fd1d3c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.926f5bad.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-hSK2WMk4Qekx+kScLOrZrpk3rsuZFVAf9JTowVETvHA79rsbd21/H52vuDX41SAT+GSGppt4ee6cKtyFg9nq0A==","shasum":"40f9451978dddf394ce9e886546400558287542e","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.926f5bad.0.tgz","fileCount":23,"unpackedSize":115641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSntPCRA9TVsSAnZWagAAAQEQAJeST/y6lyra/+SVlpRp\nvDhcYCdpUvsKW/U8++8l/ou6tlnshQwjv4gVgFsK5+nYt6qeXZzvEGCsQId4\nFlUrMu4u8fZvV60L7kPZFs7lhMIrh6bNYAyR6VjBSfSUbddcIfKeXyGnYzWg\nIMYPaSlOxxS7oQ94GytBEAAbJorwLik5TYvS+WSKXfmTK4Pbi1p02pLASfj2\nqBQTLejeNPqm8wu5X7zEfNiI+voPBHlFbVkPnLVSu73jW4sc5gwUS3deSaBe\nIpmnrYiAT3H0AB6Gpt9Tchc7zLpfJ/GJhRR7lV6ZFTPC9EO2ZIyxl+R6OvID\nKHG58CnwSJOHoiKS0GioH1t8TOrFF49jJuooFEL/QDMDON20Y6T7eqabUQOl\n8IaO7awGpcjT3mbSf6cRufkmBHJXBo0zbpC98pzWnAbaaYUr328B6nopyyyp\nKqv7H3HYBCNPmGfv+rJBw8eZ/DVLR74kzeQy7KtolH7AEN3s4zXrmRzM/jso\n3UpCn4dJez4S1nAWudukAJOCWvijLcnrp4tHno0Lxrm07r9q3RjiETJ6MDaJ\nqZF1UNpRopiAkBZTAa4KvmX+qaqJzeQEcodSGgNAYVH+pvrOpqD52OFclFnr\nKj2zl5/scQO8PbNImV3TttJ1e6XFwAYDNDIHLYDqCHMyoZn6db+tFBl0v0Cv\nCKRr\r\n=NQv6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHvf229LkTySikt1QMvw4btVSd7cWUiaW0b7u2fho8OAIhAKs4RjomPXoZhSSmRTXQ3YfYC04M5+2BqgzfV4HlNf3R"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.926f5bad.0_1615493967281_0.8171713665000992"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.520290a9.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.520290a9.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.1e0653477.0","@material/menu-surface":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.520290a9.0","@material/mwc-list":"0.21.0-canary.520290a9.0","@material/shape":"=11.0.0-canary.1e0653477.0","@material/theme":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"9817154a83b0101256b341e18843332e354f6c08","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.520290a9.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Lb2aLhGMKa5fDxQQNh0X8DVCC4q2U1i4EZ3v82Bg9J1msrWVTaI5Tq+ihwXviLIxxwNcHhNpnwNExKUqSgBKng==","shasum":"5cd1900b76a6f92ac24f80bd43651d9b79bdfec6","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.520290a9.0.tgz","fileCount":23,"unpackedSize":115641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpmdCRA9TVsSAnZWagAAEywQAJQomsd1W8nKdpZT0oc0\ndC+/RicPxEM2pL6+Z7fVByQCDjkAc8CW47IqQLb+YNumvoYmHXNYQ41qX4m8\n4fvq43PhapnSgYaM3mwDSKbDXFi856gCKKWOtWMniLUraN6WHX0j1z1SRh6A\nxkBHeKBzrwwU52yZ18+Bs8f27e7JVXZ7+Dcp0ladIOJtZRd9yJSnlTdAYPWW\nRQz5WirdX1cRnFZZ5Zz28rWNn8Tt7hXxKQop4ulkHbssHnxSFygUdOZQKZ3m\n+AEolPulgvblEst2cZcdvF0fqQ8PgoN9MxBinjWqqotmLFOXMAF9YqAZqUHj\nJ/wZHtzxtTtJ2mlu6dgoUTmgZf27ilTdeCObWaTDGC5eR8bFAp8l3VbaftJI\ndgL1zrnk3fls7DzEjcQjp1BA6JS0o5p18SRFQnTUJP2O5GY0TU+jIqnAQkwA\nZ8h5ECMg7mCpvtLi4PYCNNLbwbBZOeJGxfJsDmTYXSCZcWsUMJnDDcnW9dAv\nB3iEDihtdXc+ygCAFiWhiGw0posyALSpIMqmUaA7s5ES+fhsgvDiseCtiHog\nEmul7zVYvbO4a6vUhvFSChjOJet84LOe2Oa1AO04vZLlFqVcLrxpNQj5g8jZ\nPVeVQ3FQG+5iaE0Brw16gLVr7wDoc7BU6PHMezvqbwdd/kY/VjPCeMZelPnv\nINQP\r\n=hlNy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICTXhDhMKy8ltNxNUwHSlzgl+Vr/EGvaNCOrSZgkpCwLAiEA7Fn4X9wqYGmSdpb2JOrEfZgo7wXiQcxasKQ8qWZQNeM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.520290a9.0_1615501725134_0.6460321653234824"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ec431d1.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.9ec431d1.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.1e0653477.0","@material/menu-surface":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.9ec431d1.0","@material/mwc-list":"0.21.0-canary.9ec431d1.0","@material/shape":"=11.0.0-canary.1e0653477.0","@material/theme":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"d7159bb385f7dc7e6077615de2e9bd441747fdc2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.9ec431d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-sJ3LJ7Zx8pUgQQBk5CXHbevfyy3B4PpLiDmrxL97TAdVrIK9zz/lcVtd/N+M9NgFwVXdp+5bttFV6PqLZjoVUA==","shasum":"35edddb03cf4bb21b45382179e17edc72bc6ada0","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.9ec431d1.0.tgz","fileCount":23,"unpackedSize":115641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpqlCRA9TVsSAnZWagAAM54P/16pbLB8nANPXVQ1uXMW\n7gjKiuYCR+QomjyblWvugiyOmxT/rbiZRVVeWseUviNMDSaOgd3jpEa8u9f0\n1r2s+ZJoMbOCfnINycqH6cOMVs+vdEmUolWUE2yPfT6muuVwJYurwGhK7Xco\nVMQuoqT/co0gpYiUvc7jwlsy6C1VNydw4uRmXQCI7Ik1yCvw2CuggzTf22jD\nrSUY4oXFtVH6FVSEhVRHkXO347zF/PLYth6Ka4uN1HcWqA466X+DwGbynJ20\nqITMDL9T6hq//LG1yd+UqXkU+kcJjAF0ycAk5sLTloPBYjFgv8JX0xUJuB3Q\nFrnRX2M7LhVrZQCCXZGq66BgCXvsbpH7fdR5/C+mtwTxPjKyjvbFKHC1waaG\nm5GRshtpstr6jbdOyFt+P7UI/na5B/Jc+i8D0jNwL7PncRFA3bFVgRKLky/G\nF/GrgYhzlTDxQl9VIq5oVXzhA164TrJeWbZCSZo7QoxHYY6zALV7pcz6h6FY\nRrf7kjcGNTmEbsRatjDmmTYakEEppXGDwNGncxXLdJUqjX4xlDWzroYtgEVd\ngjmEaCKnjCnZFeLezC7oQgr1MM3aFue5bp7BPVAAczlNJW5y1vu3hT/RZEjp\ndi0utsKsJrTl/abBSWyFhRcd3PBrjNSLy5QesLifxV+6/4HB+eM+WgQt6Yzo\ngCbp\r\n=8yh4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGPQMD8p6ACa2A06+zoaFjC6VGY+mO+vvuIfS4Z6rpjtAiEA+h8mmpsTRWtpuCtao3qqMay1hWbksY/hMF3JF+zDxB8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.9ec431d1.0_1615501988754_0.4886816071466027"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4246c082.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.4246c082.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.1e0653477.0","@material/menu-surface":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.4246c082.0","@material/mwc-list":"0.21.0-canary.4246c082.0","@material/shape":"=11.0.0-canary.1e0653477.0","@material/theme":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"571cad0df3b7d77ca4f17d7248d6115fb50b756b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.4246c082.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-4ByqtGwVzi9au8/q5fEu8UxeBuf9S1ZePZMxSrjUaor1Sm0822GmDwPdTbz6u29ABa4sXE9+Qw1z0nI1iB/Q6A==","shasum":"adfcd96a3d2a0c9dc344fa99616fcac03b1f1418","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.4246c082.0.tgz","fileCount":23,"unpackedSize":115641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpxICRA9TVsSAnZWagAAjUAQAJVL7dWpuv0iGcxOU8n0\nQj9Xc112asKnRc9qJKG/QoL/ZBjlDSKLHaGB/kYhcVYgtyq4r8i4a61quk6O\nvbkswZjpfJ9zVKlR5iH6EXpiEy3Q7Y1Oi49QZ3upigmUBLE3+jbB/WONQaVr\n/HhAcXheA9FErBzgULdMOEhqXIVbVuZ2x6isvNnOuy1JbnX9D5LAP5wBVzR8\nx1MDKLhJv2L4CM3ONsehTxkooJvrOumiCwursAPo3geVWYFSY9m3B5N3KANu\nQG5EXZcYq1cA0i5MDbbwdRgUB+ajqm0UmdJ3GMXaKBleV04NF7dfJOE50eGD\nyVN3/mDAKu8UirDeKV2vgoGdLh385vYilBySJH5whOupJCf2YrEwXFrfa8kS\nTaXuhfKSU21O6I9+MXf1YmLN4E14pJl0pTG1MNs7QHbLiYq7/z2+G0fsaTNO\nqbi5zvLUBpVxQ3v3GDQRN2UvEpZI0oH2BN48sx7k7wKmJu0aDxzHG+liGFkX\nKLDoIF/h9pFK9oEmuQy2lD9Br8xJ518nIWKxmhmQQGWQxOUxiX47A/0g0kK4\nGPYRuBt08IaPOtuzj02/QF74oSktXx6GjFaNMGqB6pGXcNgFkeyuJrIZghO5\n11ECIcKxaVOMhZmejh9dBcpoZkiNQqyia8yHFjap3hwzu4ImshfHQ+5xuxJi\nq5fm\r\n=Jk8T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFKVTG/gUmiH3WzEyb9GE0CaJPsrmEI8x6HtVjhuHkzTAiAMAaFhgxaoxSNgauSOJNj4kxuqwrxSSr8q/BLOVlQexg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.4246c082.0_1615502407329_0.6492819718590088"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d736253.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.2d736253.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.1e0653477.0","@material/menu-surface":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.2d736253.0","@material/mwc-list":"0.21.0-canary.2d736253.0","@material/shape":"=11.0.0-canary.1e0653477.0","@material/theme":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"4d8c53039218a8da7cc5199162317802bf01f7a6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.2d736253.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Ns8YVCRdjXxnPTWTwcVgAWa5xQfhz9t5S2SOQmCHeFlMa9j5/zG0mKbtMR4AufhMkZDPX+4fcYq+80O74kpCfg==","shasum":"b69f83d801fac8d7d229f00220be1bae230d3be7","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.2d736253.0.tgz","fileCount":23,"unpackedSize":115641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT+FzCRA9TVsSAnZWagAAyHIQAIECMsQp5DXOxGA58O4d\nQ3QogS/Pi+SsBo26lmiFr53FsU4Oa3JN6edmxlNSwmY+aQoq6HGWyGezRRfC\nM0T+gvzFoLbgk5a0kExAO7bDztExHKmQaCGdkmCdIcoR4mUAJiqpJoDxOEkD\nxnPx+/CoXVaPffSaOstZf6w7lkUMYISeVJKW/sBe9fbP5CpH0cD9pbwuSNKW\nZb+luHwU7qYJvpiPA2XKCUAYBaCijHHB74TQOoz8/kpVvbnHyA2+SAAMhcj2\nBVArj18mwjXHtJoPGNi4Jbmmju4NvWYPSwr12iddpJrnYfcR0GxJ4FWMApkL\ndiykFLDZbniWZyHozScnIUAsxJScrNEoAlvUblK9x3W9WrGAT1ST4Pg4rVyu\nOLSDB2b/uFmbYHVm58NMwBPBXiDpJdhh9GIXlVyoIeqLKOE/BloLd4iRKCgx\nj0/303VqzwjymW0yHUuDw5yL13wzKtAupSkOB1YR52XiUzKFF4dESC7ZaAkM\nD5uuZQ40x8g3kPmW55r9TwDGj0Zfz0dE9qe4grF8ntmx3mbAHkTJXKvdEDCc\nRFWsdfOx80oP9vnmUzshOfBqrnMd5vIved9vySZnexpbUNU3VENiluRjlCWs\nwxJqCCWb8B5aXTfgmsczPAMIBTD5w5/PpymmeCUMN8dekNp44OtE4rliyvlp\nSjXN\r\n=XBjm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9C20SCeGa4h/zw539GXvgyY1eXHnOFTzKzegAaqYGnQIhAKz481ILi1CDU6YF65gKcacCGT06mVYaThvJdAnuZU0Z"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.2d736253.0_1615847795187_0.2525329541624739"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7033124d.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.7033124d.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.73a227194.0","@material/menu-surface":"=11.0.0-canary.73a227194.0","@material/mwc-base":"0.21.0-canary.7033124d.0","@material/mwc-list":"0.21.0-canary.7033124d.0","@material/shape":"=11.0.0-canary.73a227194.0","@material/theme":"=11.0.0-canary.73a227194.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.73a227194.0"},"publishConfig":{"access":"public"},"gitHead":"7797af96dedeb3641f0889f0ae67bc02a1ff2332","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.7033124d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-RbhX+K4MpjIBRy3SqXPkw2TR11lKXb4WR0M5OR0j3gQAstnQMQGjJGg3EQmnxMIITMxgeo6EdqRcKLt9Wh/BKA==","shasum":"0d2c7312fb375bf1ebeed07fdeff7da179288341","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.7033124d.0.tgz","fileCount":23,"unpackedSize":115641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPsfCRA9TVsSAnZWagAAiQQP+gOgYN05EtGhiSt0Y9ew\nFoD9oNVL3oE8/CM7CDnxBDiU6tj4yVeti71RWCln9qU9KQi1ds4wetBU/HWe\nTgFi+p0HWJFlMlIEBnbYFBuCMJWnqOjxTjXI+1dWNu5IcPKAlIo36nc2YVSs\nl+zf+Zqi3HiSRfITcd9upmLdYbsibispjde7FZWk/vKhE8BE74qYW9ik9iNO\nT1Ud9TAS4rAb1trZcmJkoE5YHU0L7PaqJbQ27IQ/usRdLxyp/NQbBV6ex+O/\nMXT00+D9DfH5V7o2w9rIRPktPphKpjo8ZRWMm8hCc3Ng6d6/5kItr0UX3SAm\neOPfoEeiOx9fS3/Z9rdDX4JfaJVVRGcL2LxxCITU4bDkbXUWABTeASMRuABu\n1WUe6QPtYgYw1mFFMFlQVDc3qi/RMfyVkeJZjLJLpUcfdlAHlZj07tuA2n+o\nRpOQEZ/S0b1kvaP7DtS4oiHcPBSCXTnNrznYTBEhlUfBYR9pyeVAhLs+Ld+2\nhwTzpiNe7W6sAK/ZiFi8eC24n6pEU7aLLoNbg8KGJRAc/PBn0+EF2NX41Cy2\nsn2ggfOlWaBKSz3/UrytRUHumy4AjBOCzPVVSSjTZn6xkMswNUCOaiSUQ6U2\nsHlPLk/cxtZN7QUbUTn4N3GnWYQmrqIpkXuJ7nwf+oWn/SooCiWfA8giac5S\n9rLd\r\n=DP40\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGwh7qhrl77YzOnH1UyRlNvWB8q68NpI87pyZP5D8pnDAiEAsvIT+nK/zHGzkeqIn9WdiqTuDicqfhcEy2OYEmDBDcA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.7033124d.0_1615919903545_0.6861969281142541"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6c0ee901.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.6c0ee901.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.73a227194.0","@material/menu-surface":"=11.0.0-canary.73a227194.0","@material/mwc-base":"0.21.0-canary.6c0ee901.0","@material/mwc-list":"0.21.0-canary.6c0ee901.0","@material/shape":"=11.0.0-canary.73a227194.0","@material/theme":"=11.0.0-canary.73a227194.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.73a227194.0"},"publishConfig":{"access":"public"},"gitHead":"d7894da96b1452ae771bb3096b993e3f51ce8adc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.6c0ee901.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-U9pe8k3B4u9QRXdHJu2peMR96o1kp7pPsoZojz06d4SzBfCZscST/h68sp5rfwLKZWn0YTNdTUuT+cvE4YLX2Q==","shasum":"f543310d772ccc88ac449ca586a903d6db667edb","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.6c0ee901.0.tgz","fileCount":23,"unpackedSize":115663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTO0CRA9TVsSAnZWagAAe8UP+wY8fLZ7Q+zPUlckL15I\n/UYQqYrgSqVzHua9akoxJtEYouqgMbMlaWnAVQxC69ZqxTsLZ+22sVIEig0G\nTWkw+sBNHL1GLUF/p7Hgynfi1kwbPKHBV4DFWeFDX84kJ4RKeCgtIyqdkvRg\ndydYkqPc4tERonW5O/ZVwHk1fIVPplbFBBkSl8Eu0K2gCB2XvcYaCbH/i75J\nsud+XopOsDyB6lNRjJwUonJasiXfIV2POImgfoXRLZX7CZ1XwIeG4zNKH71y\nIxckAqYNdTAi7DWblNLM9NvQIy4ltYyIwIC7RVBnD/fV6IsMaAawMSlIHJau\nfaq5cmCMOUVrXvIzB3+mXole+vQlK8P0rPB+w0yKMTYJdT9/PtyKqc1R4zbf\nVE64sVW5A63EIHW61c7yo9VBmENTaMAfmFeF/3ek4jFrvnb/MWYBseOxuzte\nh+9RF1ZyHYjdu+IZOfw3edIURB3unxmZcZyR5sQmMHAASuDbDizQwnGGGp6S\nxtR1F2bBMPktC027jKyrv4mC7+/uVQOswNeQuJmlnJ+1Nf+xZaQKwTF0syti\naLYBIBVRW1rB4M4Co+OS0NQMbgN+O0TqUdt1Qi1RXJC2OSE6uhHcJ5o9PCY+\n+h69E+lofOSzYt+h4eOQiu4FmrFPIFdnMUbtgrPD8I5u+WkE0sLhyZQRCuVe\nGz55\r\n=p5hk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzHRDq88geatkx5y9CHj6fDAc21Z0yUI37yf58mK2XGAIgdRiPYrPwYZLEEONJX05yqpA1oRE3yBDElJwjr/U8Igc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.6c0ee901.0_1615934388386_0.8405144833087896"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7f0d605e.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.7f0d605e.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.941ca3b3c.0","@material/menu-surface":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.7f0d605e.0","@material/mwc-list":"0.21.0-canary.7f0d605e.0","@material/shape":"=11.0.0-canary.941ca3b3c.0","@material/theme":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"77ccd00da9f68d22de2494a2aa4f35b0da375669","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.7f0d605e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-sgGx99T7eGQQ/DR1HFR24EKksc4oL6yGdAWsyP40xAunpiguxOquQemp4/efi3sPaU+KLjQERkYm4xMWErqm+g==","shasum":"68d561bb09927fc539fc1e566afc5b1bac5598d9","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.7f0d605e.0.tgz","fileCount":23,"unpackedSize":115663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUkTtCRA9TVsSAnZWagAA2dEQAIXLyMIS+JGOFHg1OGGx\nAVpnx86E1yXveGOzZ4VbbzX/P2mAwfCvqXqmUlLe3+8fP0S/BOOJtoc+5sc0\n1/gs7wFk4SsQ5A+T/CadfdrShNSQ3dvhIIcket7fPNK7MwXMTuO4m5fRW6uj\nv0EwivZPHGUvNr4jnKN54JOQWUoRmbNgx+HW2PGECQypRW52oRo4tM7ejntd\nIJK1kzfSmFkPp5ea6t98IyrgLYQaicB6hGxRms4vLMglPz7lsMizmc6DVZd8\nHpoGhwsBSI+dDnOIxo4sZWpx0Ws2/COumxESv0D1moDm/+dCKLcZ+TbtbPto\nbJZGs+3WWT80llefQq+gknP1MnzPBiCg1Bw7dP4buu2wBqc0aGUXtggi8vBp\nZw4y8DG5D66wD9qNxyi+O1r9iUetGqK+Tw1v97vdyWGhEgcEeaFZZSl7BhQ0\nOefOkwIFudPw9jeAaASCwfgObeUdgnfgy9yjC6av8ntFr6G/i6VTpLLwbbOh\n+kOAnNT4lVt9vSBlRm+NMMmKOZQhRtD+eQfVy4I0q0mTMb7U8GTphXA/rcpo\nvj2fivgTRl0BqoqgmrVe5pG8w1S5JAXC5WhzfURcxYwujTqHNOvZs5JPIWg0\nsv3QSp/aeZ1BEvsf3W+QtOT0vQm18/B2ajltwjstOxYnf2pm5l8V31PQLT9o\n1lwN\r\n=Bcl7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJabR0xEi7LJt3YPP93ZTrpVdvKGQUt9meZLv4dWBphwIgfOAIecQoPwcFJuVPlFGJGDLSVekZICmHq2VsgS7jItE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.7f0d605e.0_1616004332811_0.9966011845692715"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.572107b5.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.572107b5.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.941ca3b3c.0","@material/menu-surface":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.572107b5.0","@material/mwc-list":"0.21.0-canary.572107b5.0","@material/shape":"=11.0.0-canary.941ca3b3c.0","@material/theme":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"9399ecfdfc3b2f0153e16b3970555c1351c9ea81","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.572107b5.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-EayA/xC4UTr20A/qGAjGNH56wCEeIClp2T4fpVZjh4AWfmCB2FpeoBG2+I/jrm4BKS0180ceYL0lDpR11M4WIA==","shasum":"3419242da3ad2915e2f3628d114eaf23ddc7bb26","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.572107b5.0.tgz","fileCount":23,"unpackedSize":115663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+hVCRA9TVsSAnZWagAA0nsP/j2TjsQx3iEZhFYyRQ5m\npOETwXWH0V3So0FYy4Co4MLlEtTcGtQSm7/3xRUwwKJRLEngMGf+bL65e2qC\nQ1sy1Dz4IFsE+Ts6xW1P7T1TEqTM3Zt0tQpTbZxUvbS5uCPwHW299P3TC6tw\nAZpYzCzNoCcvcmlTYxp1X8/WJvg2tR7xsr1zk7Cyd8pEMQU0bCaqyv3F779Z\nP5ctNSNfldCOPbKIlzMWsfs+dI6hyx5Kw7GU4UUv3geknyGqinXcXHs/Ro/P\nozsC6Xblo4EpG104bOKRatl19hWBmTSc/o10RqYBQZw8VpdNbBIrN2GSLKng\n2y29iQPtgIA9BGXo6Uo00zplObfFufqPqjdaHbpJciFPxoQq1LzsrcUt+2Cn\n8ENNJjr3TOU/xYlcVaEDV13BbArCUsANxoGcQxCtmnZWOAX6RPdFKo2SbvM1\nGp+RHCYibOywapVP/GJosOFLg36vlguXtmtizmAg8c8LWoLftvPwXRYt1U+3\n1UICoDO4a4JC7Hq6OT6vLXOZX7gUJ3a7iRNq9vrRwO3B9ssFkH5YZo8/z8uE\nrPPL9ET9UbtqiWYbtOEIXq4754CSv6I3LmyT7vsD5D11RfvQu9+wEn9rQHG4\nAhwQFVjqlIC8Cu9oJmMBYmdjwwhAgoq+8jgYCohMQvOgEBcj4hKh3TexkZIx\n4j8C\r\n=rx2u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzJBXTmHNLpjAPCwZGpRq/NO0mDXpZqyD/uoRukz+XUQIhAMtF8MucBfjfFcooAyBAueAi6ivDVqDxJthmrVoF5LdG"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.572107b5.0_1616111700820_0.10402283705633408"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7b220b1.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.b7b220b1.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.941ca3b3c.0","@material/menu-surface":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.b7b220b1.0","@material/mwc-list":"0.21.0-canary.b7b220b1.0","@material/shape":"=11.0.0-canary.941ca3b3c.0","@material/theme":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"23f87dc3afa9f7b0599f9673a9f27f15d9751f3a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.b7b220b1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-tc9PLeRl9GoBCBcMvW++T64V7NKAMqyseWXcqdltVpIBfpjwDJw68016TP7944Bo4vn7DDnAUL5k3SfEd5BEkw==","shasum":"8f96c551b83d31280621bd8c31b3263054fd00a8","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.b7b220b1.0.tgz","fileCount":23,"unpackedSize":115663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+5fCRA9TVsSAnZWagAAGeIQAJrnWiM1j/EJwXqRuqfm\n4/cSvp/aFKtClIqLci4Jl5iofxvP5gRrWBgKvsirexSmaea/ZGEojQQUu+b+\nn00wOyneQT6nqmn7ai913FguDdC8rPQvVRTQaaoJrO/n+aVbpMkQU+88Yy4G\nwdV79iRe7SJ/WQ4XJyh9vajw2qn0MHp5P8MJZDlvu2tH9FcAJd+agLKP+NJE\nhLU9k8GfNOwadFXdvinwQ3T/t6WklPYOK9EGspNaiwqunIGgc50J7ULdrdjZ\nfoQ934e/vyQyAOXa8Yy9B6MKJ6DoU3zvY7q5sLRxIcNt93rLGID+/K+jJIl/\nMVxt0KYmS7ap5Pkq66G291++5fRJvKu+WNVDCpx0OViYgPwowJfU1Rgd6nmA\nKpxvzmpZ/yOtDm6irQmxS3hEmDRNo5ot7oVDWRULK04jTS6t0WJLmua7/hzL\ncUdJJijY1QvOXWd+n+0u0TWYtfuz5PWU22ubhwZz45glhIZk/um+zhACNgUF\nd1+lw3SMAFIXtkgU9KS5g4+2wnvw2C1GHyvEXYH56yYX+5tj8cXU8VVAXrVG\nkfz+FgDvnQfyYANpDOWZjqdiUb4Cgsm3zaX5cw5OfzSVy/NsIjzt68+yz/u4\n7Ebtf8gClijoK9GzU/+VOCYYE4M2VMTZR1GckJcMPqcFpXUlFc2dV7rdNZTD\nIDUV\r\n=2JgJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHOBbO0q5TxqlZmD3bWy+gP3BV8O3vL1TL85iqC6SJ4YAiEA23NyKLuy5265DFCWVS3mUPZduDc2cQGYrREwpqdcy0s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.b7b220b1.0_1616113246560_0.26282735516337263"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.233b2de7.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.233b2de7.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.941ca3b3c.0","@material/menu-surface":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.233b2de7.0","@material/mwc-list":"0.21.0-canary.233b2de7.0","@material/shape":"=11.0.0-canary.941ca3b3c.0","@material/theme":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"6887e9dd977fe57d5199416b097952ea056e78c6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.233b2de7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-OyuSu/JeqZRD+Rti2GWCoeYQ3lk8GxIJxz8GkGUt+0ikJT6wucwB9oQmoCVyeF05ezzCLiZgvrHd2+G224inYQ==","shasum":"ffb90988f9fae33c3aae0eecaa5eb7f8e2789f0a","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.233b2de7.0.tgz","fileCount":23,"unpackedSize":115663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO3RCRA9TVsSAnZWagAAQm4P/RJZ43gX+DKnRCM0OM8M\nD5uKFtPX2Ea/L8GyDrGxXgeSLvdGd/0eKsJ2EUrrsmmIjEif5VnYeKLFT+Qy\nydEjMidDHj7Cle9IpPF96WjP0qPPE9IDruOvic6tqP2cvwH8nnYMuGveadIc\nrL42+Fg5bAbb9z+HBQmO2XMfqeRPySWSDq92t/JQom0ZxEkw+1/3I1KoFsoI\n+tKuw7CCUE95Apq3waEIlBHI9J65cXyWPtgTr3sP3f7y5j7FqfUxV5lJf3Yp\nBj+LiOeUwncc7B4C7z0A8fy7U3Ub5QKLIytOYkOg3zq6MjAjBLDrWyA6SMWF\no3W5ptTolDtBmjfdOythY8r/iQcJocfLFaMTi+/7aB30BTWylRxWtjHT9LmU\nUPPx/gUrnlsK0wXJ4/9kEljUR2toDE9HxdvEN328HoQ87HsIAqTlzPN2cLf8\n43JpK1KsCWs0Pyh52Vl2rildOwSA2+mCRYZBME84o9tzPSDHWbob+4FO6UMw\ny7GCQXSz8Fp5InwpG30inJK/uCtTqmd1S5GwRr6kxD2um6CNUAgh2C3Ptvxs\nc07Pafi5EAxmupcV+dfw8KTpauYvjupOLixcWrPWl5sfNOukrgxpw1dy/NE1\n2KmWSIv0pkKRrF8BB3aUonJwNq9hUtY5iAXtvKDygTyK2VdBjuBmn+efgDLL\nAOsI\r\n=kL6l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICkWDCRxJEWp1kwWVm1/8mUzlLe8LSIVXjjLP3fUi7cQAiBRDwaFkAIfEIBrx6NVxwSoHIsOOM7yVV7XoLxotLhOJA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.233b2de7.0_1616178641088_0.9395827401159829"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1a2d97.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.0c1a2d97.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.941ca3b3c.0","@material/menu-surface":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.0c1a2d97.0","@material/mwc-list":"0.21.0-canary.0c1a2d97.0","@material/shape":"=11.0.0-canary.941ca3b3c.0","@material/theme":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"d341fb857369610d763723d28d8c9955cc461de4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.0c1a2d97.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-mVD0w/DrMwyDIDjMGQsjPPmHhwRqqdfS3j8/c/CpQugr06F3ooKRd7+K9Wtj5/nRflUG4iogb/1xAOUdl2HACg==","shasum":"2a7fb5b439865c282e2a492de775359b8735b880","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.0c1a2d97.0.tgz","fileCount":23,"unpackedSize":115663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVRX7CRA9TVsSAnZWagAA/AcP/joIVwdnScFuuDeJN+9T\nrPhJVm71bjdZ0ktlVWspTVdaDYxMn40ZkIrWjSI6TXynsj7Dj1D5N1bxKzU5\n8FnXOdoCSvtgv1LQPyw3VvnLvC3rx3nc+uSA1jepNPV97sN/uEAd/OIBaPrH\n5gM/YR6U1n/u9ub83Uw8aj5qW361+9nUA63x2F6RZghK/qqzPF88OjEpj7nM\ny0slJa4D5I3pAho8b3rjNPmbScZN9t/AoDItIAHyFB+HWmJaGZlcG5LxI6fU\nnm2YLINN72UhemMZf7N+V5mNhLz079Q+ajghHJIjULReleAUG4sDuOh6Xira\nLpGX/CCwvoAyroz6Pt+jNOziYWrUaA9ROYrs5qI5dHfRBbsySATOrUucw/zk\nrtR5rgq3kAUqsIoC5G+Qy9lCU5WZAvBTDLY5EJpT0chZDfyPgZxYwn8Min27\nbGunYyhw/ixl5HwmEahi8MPXiOOdHdT+eaZl1tsvTJ5DN38ritAwynKmS+Es\nO0U1gl4X7AAgBLD4q1rQdldMDmlwNFEQI/j4Sm83TFr68aiwVh+oFQtkg7wI\nbD/Xbo9ABjEdAkjiHqMtxsLBf8hy92PS6CytB3UsAY+MSSusTdAtFrnUiAv2\nFNUfyQJOF2tuVXF3tecXLRM2as+ruL6VdTMhWNxFzFbHgXxB8fKOayx5wwdJ\nASTR\r\n=tYYc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRZS/gAzwDnEMvCaOt3Uj0wIVN87LwCTrI1XMnCB80DwIhAJR7C+woaXD0+63b8/tOQZ5li8TkgE+rJg/OKS57bZWM"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.0c1a2d97.0_1616188923468_0.35344517598772507"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.57ca2e73.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.57ca2e73.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.5f0fc444a.0","@material/menu-surface":"=11.0.0-canary.5f0fc444a.0","@material/mwc-base":"0.21.0-canary.57ca2e73.0","@material/mwc-list":"0.21.0-canary.57ca2e73.0","@material/shape":"=11.0.0-canary.5f0fc444a.0","@material/theme":"=11.0.0-canary.5f0fc444a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.5f0fc444a.0"},"publishConfig":{"access":"public"},"gitHead":"aa86345a10da02c5166fca78e72e367ebeb95677","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.57ca2e73.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-nUfDhrLXU9fpvubKu3ICDljfJM57FfDKkDra6opyLL8phImMUjvxXNOT0gAKf416KbgMW5vr3al6V1/IxwQTMA==","shasum":"275e559a84b5655f5459bc2c234f1f338622df02","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.57ca2e73.0.tgz","fileCount":23,"unpackedSize":115663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVSirCRA9TVsSAnZWagAA55kP/RJCbA2jsf05LeNCON1z\nyg6vzNY+KXQ/NrMIn4/ar9V7zUe5HcT4pM9VtWEXKVWVHf5nxsoLSOeD184J\nahCikZxt8Gf7hq8q+0hwUoXjCM+uQ5rYGYEiZWg2YqQncvxSMkB34H1NgUnJ\namATy5agkNFzu7qN/P4GFl5mP3/zeSzW6GelNGxmE6D0pJVwVMzfpE7cWtbl\nD28Avj7dBz23NvgRJo44jGjPBQcTzERlu78WIZBxBX87gtir1YVQOdd01eiH\nQA6RPRiMjiTh9toJBkqQEcM3eqJlKwj3O+gukN7ul7O8DG3YkipVg/50r7Qf\nVQ82S6APRK1r4pIMyYZyuV+IkdkD1ohT2ljmICxCGzdXcsxU6gV9u1nMD4Tm\n3vHpIEWsRa8n06YyDD1FcWuUuN8I2Iag8L5z78fbfabZn+VvTa3nZ/ZL4B6R\nzD17TNjsPw0Eo25V8jbxui2xFEsATA3zUVc84rfAvCZ4VggaHISCLrKuffEA\nh2XjcKbLR7IONuMvG3s9BUsjnXdKsozj4YJgBD1j70CZrbF5l+ANMmNtK7OL\nlVR5agAyB0WrOZPh+QNyL3H9vjcUu9b5T/J4Z/qp2ILfn57dYY1bA5KQU6+k\n1g8ye62hADHAvLH68C3IYHzXBRUHZtGtOi0lYMlFFDp1t/EL4TqnRIWza0az\nGrYH\r\n=xVEG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB9DErC0qUdt6IGXn6LIs44g6oFyAyJqMVoxuBYpx4XIAiBFZx8hgfS/Vwo0y1CWpQ/MtdSUWMDEndMSPN+45XdZRQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.57ca2e73.0_1616193706717_0.2525316806589073"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5c058f4b.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.5c058f4b.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.8943b991f.0","@material/menu-surface":"=11.0.0-canary.8943b991f.0","@material/mwc-base":"0.21.0-canary.5c058f4b.0","@material/mwc-list":"0.21.0-canary.5c058f4b.0","@material/shape":"=11.0.0-canary.8943b991f.0","@material/theme":"=11.0.0-canary.8943b991f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.8943b991f.0"},"publishConfig":{"access":"public"},"gitHead":"6a50e9efec728fe20024c0ac52645387b1485f08","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.5c058f4b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ZuHlHbJgWLTvmEeiagZiqyEQJTUbMGWeZ+1g0/z/Gm+kvrJyVYQfhoq/YqaJqBbjxRc0A6XQ2ctm+y1eMVNn8A==","shasum":"a86e8e2d38bcbdebe2c48f2a8067c4e721fd140f","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.5c058f4b.0.tgz","fileCount":23,"unpackedSize":115663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWnUZCRA9TVsSAnZWagAA6DwP/2kxhDRq01TDhoQW3dSQ\nQdTSzkuHhkT0usnyqRGsTMFSs/l24J3jJT8PyUIMoQ2dgrkcwWX0j34tuEzj\njbgPrk3HU3Iebo/XxxLdY9cGBY/7YKED5mQJ+XcWHFwktxduePBLkbGxaRcx\n9wXMeF45ygzH32YhifhW/fZjLQ9DMCoTWs2JoXqroZTN70pDb03C420htUw+\ne3T4OoU3hqyiwnxhLNlyGscuL5JFbYvp0rgklLd9fRLSkxy+FeVBQjEahMk+\nQi9BBqFp4G0hAhi1Nd6ti79DSqyPKRl2nvFUjjSANYPcBueCo68iEaTYfYiM\nhbB2WOfegIHbhutDbDaIbWqjc+OhwcwcPCq+xcoM9vloPIkO/DNJ0Bl3aovL\neD+4OgWxP1Obk2S+WzycYlyVjI+y7IaBjkNGMrInbjhFRkxKMgOtxzui+vpx\ny9sMIviABnqhfaPRvWa0Nd3uNuwT8QGss9QIb9jND5vRzfeofQUvkvbb+Tqu\nWdY0uchTCJDDt67ir5L3ZPv+nEEeY+4rRmgzErIrJPUW+3kCITJkwjsxcDHu\naqSUwRqC1eAPt5WxwUgkxZmRD/EVO7psvJJ+Yw+KtEnakrhmcyhAIlgNRIs5\n42NWFbM2dhThX4l9djwC7395yMXCyW6MFsOd788KpRg2d95SPmUPOstKRby5\nS5rW\r\n=UV5G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHwXOTj+MYR+kr/b5tm2I0uThkZe8zyNJ+tZg4q4IdcZAiB0leCUuOGh9MfLaESBe91WLia1bgMzrzm/K+mMJC7c7A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.5c058f4b.0_1616540953152_0.3415228775307848"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e27ef7cd.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.e27ef7cd.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.dc9c84023.0","@material/menu-surface":"=11.0.0-canary.dc9c84023.0","@material/mwc-base":"0.21.0-canary.e27ef7cd.0","@material/mwc-list":"0.21.0-canary.e27ef7cd.0","@material/shape":"=11.0.0-canary.dc9c84023.0","@material/theme":"=11.0.0-canary.dc9c84023.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"gitHead":"7631d1b220323112ce72141784e75c8356ca0f88","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.e27ef7cd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-SQdqIKoAW4IRaawxPdheoFoNwVEUUkokM3FTDwUaB265TurA7IQPp9paDH5wdQs74AEGdne17rTsGF+vXcne4A==","shasum":"a74243e53c7e4a457cc9b79b34dd0700363cb92f","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.e27ef7cd.0.tgz","fileCount":23,"unpackedSize":115663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY4YXCRA9TVsSAnZWagAAHpcP/R1zsF7nDkD+Q9t0fiNx\nv3fsBVfaACzp3s5oG/9UKAAW177ADltk9Dd5WkmT2lGYodd0xYORQfzxucYj\n8C4sft8KXkUjYfqIXXK0iOEhrbswgTQSp5HFzH3aFQoKQ4AS3hilTgSsmj5f\nTanXSaj0KaHFgrHWxgCZC1fxZ0jfR6d8yGA/2JCcAQgEyshU+hllwLiHL/2L\nZGXzlif6PSMrClxmnpJWIhZKi9hdz+fDUwcVMjYZVw4qRJzG+eINZjVcaNoc\nMwRf0iKoFnoN0Xisz8XTiMNl/4RT5RDpR2YCQj9jSrGmicroNu1Y/7VZzpP9\nzmbxJHeAg8Txud0OMjENclq7iS377pQecl7fknhebFm14eqQdgv0C7NYZY+a\nWqN2CvPMYvY3zzxsf/m2FCWT4UNueTVQwNAzjBi6STAAfyCwr05DRxFd9ZUc\nOI3YK6e3X2aR5CK66UXYt6rnFCPRkY6gB6G/xg80z+MMiqZOUdnGEVhv/xMY\nylFWLpAxXOLaq012qog5629JOhdFcG0VUms0hXXb9iWzphUyhrmtkF8sn4re\nj8W638pnwQfK7VQZ+0yZg0Yfzahj0ll2dzWaPfr4NXyw6hkhx2HVCiGOCxJm\nT40LLlBJzwruF2+fgRmAV976d/Xwizrhnb+dwfODGnia3FEZVOaYBEyyHIvY\n/1+8\r\n=kzJo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD45u+Iielx5qr6Z3K6y9PZxj2No6yfC25LULSfehAFbAIhAN8gSFdg5dOeYDF1uDG5SvZMukSgvvAKlPJ7LPS2GTnJ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.e27ef7cd.0_1617135127110_0.2082501303716966"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.15c09e74.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.15c09e74.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.dc9c84023.0","@material/menu-surface":"=11.0.0-canary.dc9c84023.0","@material/mwc-base":"0.21.0-canary.15c09e74.0","@material/mwc-list":"0.21.0-canary.15c09e74.0","@material/shape":"=11.0.0-canary.dc9c84023.0","@material/theme":"=11.0.0-canary.dc9c84023.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"gitHead":"6f3ebc4bb5f04f139f9cc24061e00f418b04ae88","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.15c09e74.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ev80CzsXh575zCJ0sGCla0GVfe3kmv3x1Hjju+1ScfJqgYFb3wCcWuCXx1f5oEAV2+2GX2jePpRHfXbZcoW0Ug==","shasum":"f3c3354f43c27e3467e30dd3427142195d5c533a","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.15c09e74.0.tgz","fileCount":23,"unpackedSize":115663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZKffCRA9TVsSAnZWagAAEEwP/iCLfQHWBDsgtdcjp32L\nXWnlxB+WYdEJp74OG4smLwJEQsILQhfwgHBxWF+D+4HIadsM3qZN7qmVX+Te\n04HRd8KfWq/bK/KsiMq92Z+kYiZaiChAcUixKLdNkQxXbiD2QNR7y9qS7AB3\nsGWoRvO9jFiCjKXXuNmgov7eH3Bj4EGmrWr4mBFMcO4QU3v6wSNg0wo4TlUZ\nXLvbDEmFYEfcMAeZtiA++6HZp3Dz+DSWgqrBSHjzE1JLDINhLbejx1TQoHub\nP0+bsBlthcgUnEvDkrzh2XELsBQlNT/44QkTIK0NP6eyJqsg7mr4EjHrmLvB\nZs22LYLyIyy/gvl5oUcK9ChcfpT+qRCwVkDqMmEhwfXSBdqG7uI5DJWqZWRu\nVNhnc3CMdBDTGCl0V4dtmcRLrO4HL5CMkrfGeoU5iuDG2RskKSRf9ODVpT6U\nvmom0LVHMW6HCYFel8ylqEK6MyFIKhiXmBkvTGa6gzXDKGdSxNxRxLMDeGTq\nwkWk9NRSShTHca7CRAdJGpvZL0FwHNe5O/J79nt4OsHnOInblSjkdjIF0bAW\nAgTmmYOVe4PTPdIrM0F33gzCwRYXbpQ7XW631D+RuLjUXnwCfnywlOvjQsFg\nPkDeX4a21s+zxWCNqX9JI+6z1JszvyjksPiM/+u3nhnqFTrlTFRsap0Lljqo\ntUZw\r\n=Ex7j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzo7aTSHEUV8dpEwhGKrSoqebo+q3EthQF9hv2pLSE4wIhAODUfh+jL9oD5kFmpzr6Skh6b8EcyOK59dFUE8BMoses"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.15c09e74.0_1617209310749_0.026989094139277414"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4dc32be3.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.4dc32be3.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.dc9c84023.0","@material/menu-surface":"=11.0.0-canary.dc9c84023.0","@material/mwc-base":"0.21.0-canary.4dc32be3.0","@material/mwc-list":"0.21.0-canary.4dc32be3.0","@material/shape":"=11.0.0-canary.dc9c84023.0","@material/theme":"=11.0.0-canary.dc9c84023.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"gitHead":"1f71c032815f456f2ddbee58c9b175e65da3c18a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.4dc32be3.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-PAOj6Mb8NsVGm4zX/x+4p2YpHylT7sYKEBCqnVaq+0RSIrE5RMmbhLVwSW2fUOUcBVRifYvyE4MnlHnr2AT/3A==","shasum":"66a2ee1b2138f3069c94b1dcc8a9320704f33ca7","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.4dc32be3.0.tgz","fileCount":23,"unpackedSize":115663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZQpsCRA9TVsSAnZWagAADbsQAJ7e7vfyxrn/Pqj6SDZL\nbu4m75jsFhxrLjODJLSsfxhKjvegrgHHEdwT75ZV9ZGf4JFztSHuKYwcSUuq\n3BRVrptMjPOi2slSfIYzxIDeRTKDHd6yaOtz2grYvK8vBV6qUEEdbQAJZKI/\nv6zKZLfWJG8v6BOikX9ciXMphd4n5DBAZ/AROVFrB062ab/beLK4hy1qJj/J\nG+9m6Ff1XjMAO2gjfVIA7v24KmXLVIL1GFDizOoQlKd6Wd7UJKj3E0rkYHWr\n+ReAfaRj13aMZuH93WxJPH41CPbnRx02Dkk9XpIC3EU3CGmbT2Dfe0DQZpOl\n8FIZD4xB92PscS1X1qRCmXGEZM8QpT+6dZ5KI21FsOLU0pPsgtGZjKCK85ix\nYD/S4kqLgC9Wp6JALO6nclXgGE2tbKRJLGy462MfUI7QSrZfICUkzCOYX7ga\nNCkt7x1KIaqDU6RGyTDKZOi62yw9PGU+rISbl7r/uEhZXG0rJMXfz+9LnCKx\n3c+8/m7v6qVFF6x8AIOgFKiQt2MCsWBna0E5X89DdQTpGqY3iFPEzo/hw3p5\nKZjdC6+sK+cg3tafqphyilZSjrMokG9PyY5k+XM5nCvcqv6QK5VEYPveb5id\n+PsAfTs5BE3GR+i8Waa4sLW1Y1pZZrOkDAi9gUmS4v8hYZRYedGfDq9SIQ+5\n08ud\r\n=NHVo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQ50WrkZyqO5A+/SWz8jf6q+rXGRgtmGC4QZ3Bqipe6AIhANk9KivUqcgww7Z+PDSHtZCwHxOC0jvG8DGs8CPowmfY"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.4dc32be3.0_1617234540303_0.6171454247865582"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4b717f65.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.4b717f65.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.24609b822.0","@material/menu-surface":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.4b717f65.0","@material/mwc-list":"0.21.0-canary.4b717f65.0","@material/shape":"=11.0.0-canary.24609b822.0","@material/theme":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"a7b21246791a74b1ae4e57975b1f4a394ad9cba4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.4b717f65.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-0+SzlAjQfQMqBOj9UCe9vErkbrc3jlVeNV4dN5RGLI/o0NJT8CWyISSmhLqCt7L91jiFvZhCN5RXhr27mmTWpQ==","shasum":"62e478a0a25e06e25a644e00d74eb4c68d1e141f","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.4b717f65.0.tgz","fileCount":23,"unpackedSize":115663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZg21CRA9TVsSAnZWagAAeVkQAI2lxWTwDXmjR0C1+js0\nfRTYinab+CEstgoDhf/lpgkktXbiNMrxJ4C+TNBJnI15vWncXLdwLC9TggFd\nsGn3DGqdUsbNJ7kHyVoTxmtuZg6DXj9VhjvGGJ503YHlUDOoI7VYDXQviuLO\n/oh/CSDMULC9ADKh53E2WRYHh9FT9Uh7Ur0/W898h0S6yhlVmYMJUnTuDcYM\nXYjuAy+714XdzJDZfe8f4mRppPop0zOKx940bQ+QIyLjfQrVTZk8QaTm557m\nokl50QJ4TsSL76RpmR7sKaICaXMYR8Zs8vCtF2Lhsml6kOkc6qTCf5vwb872\nfCu0CtJe/R4hiQmGsw6PVpip/mXlhoYF1AqnNm+qIr4hLa4PM0CvfVONl+Jf\noJ2iSYwA/h5qkjY0xbkfob69HuEjpKg04lpNLOQ9cywsOxKBSAWz/weiJBOs\nUcGwarlo3BHfj80H1du0qh638iJyoFSlOeDNWP0F+p9onwvEnb4jFX9f4pwP\nREjvE/X2/wTRZgL8BKDb9WrRm0FjxEMOyusnWm50gELQo0GyTZ+2Kemh9BVY\nWgsKDiWz0T9tE4M+gZl+y4j61UD3G3D70rKLd7odnLf94FuMAxixOfTXbJSr\n2zYjl5yBuiAiExCiysBhxqXDTCxRI9aRwCwviCaD3wptTlB9q4Th1jEDONuH\n2tS9\r\n=F3i4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEnXos3utzInUc781QjXSG9d9w0gqYpMkQ1NUDDSdpCgIhANuNPS5XpSjHRBA0j7ibvou4o3beCu6BLMuiv/5vEkek"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.4b717f65.0_1617300916931_0.14772761485211627"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c6870f20.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.c6870f20.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.24609b822.0","@material/menu-surface":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.c6870f20.0","@material/mwc-list":"0.21.0-canary.c6870f20.0","@material/shape":"=11.0.0-canary.24609b822.0","@material/theme":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"5808fd48fe9ee3cfe17f631aa6addaaa847cea19","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.c6870f20.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-mK+AxWFjMVw5nRcD1b/m2SGwzSwh8m5pADpwrug7PUWDmDnztHyJZdkHi8Lb1mR4m1caDlF8wYvI2lFOpKZ0cQ==","shasum":"3e3599c98e5239a5f5e546d6184c3c6b7a64ab6b","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.c6870f20.0.tgz","fileCount":23,"unpackedSize":115663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZlp9CRA9TVsSAnZWagAAxIgQAIVgUQuJ4TTz/urolJyh\nT/S15ZjFJUaeA+xYlMMCIAO7Je6ejh+aJk5sOfcBMZ6riZyOQ+M2w8MZnqMv\nnVL32P981gMRIKaCaQvuoo2tGHJ9SbpnLRzgzjdDr/vCEohAAapgKuQ8PLkD\nmCFj7l+bJbdvvdEmgEHZ3QgDRCC5pHPLaq3dp1Wd5aX6b3ZXiUaGXFYAAXOm\niWX/Fnwp2T9qet/2FxWYc7RvKiIa2SEmf9YYk/fcKlR/N3guswsIaBfokwMQ\nPoYE6NnVzKWV1jZwDlEk0OVQBJhF1fYKWTKPl+rkgbRsVK19tJ1rPxAnFRSE\nUUZD0glxyWY0lRoXFLaTcsKckIa5JQwj8eGJmWJ6SW+5RehMkVFetIJR+GIq\nNAzaybsupehko/czFtPZb6/josXMaB10+tAoEi4Jl2+TIJFVBic6do+SaYT8\n3DVp3zEzRveQ3lAgdjWCP8FoqdaMpn4j/mLHKel0Ge+UwHtKMNVQaBnElf2y\nuf9RUMZTQsu0zzxwcMnbGzVcQ8DuI23QpF0fAAJjCdGd86KOy86Tujs3f6DX\nu/hexX5RUuvVRWQ3mP2TVf8W/XkyjXf2KZ12CLCuihXLpM+PEX94numRfbuf\nte5i1GNM7kxAhXxA4DjLhSvkn7sNyThP9jhtjyRdGXMWG2TfWiLBEIAB25zl\n2MhN\r\n=HlZr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0WvVaGKgWO6xn/5kKERDDbRBHhml34jKj35Y8vAGG3gIhAKkKRWsYBYXxLaPmyfd65QcuI2kixtPqsWd9kocf85Pd"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.c6870f20.0_1617320572780_0.975361901514121"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.852f873c.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.852f873c.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.24609b822.0","@material/menu-surface":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.852f873c.0","@material/mwc-list":"0.21.0-canary.852f873c.0","@material/shape":"=11.0.0-canary.24609b822.0","@material/theme":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"f528b03c675bb05baf871766e103e6e35c28e203","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.852f873c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-UgxGV06ucWt+5nvs3OyASSdo5v2GPkBI8ENcrG9eUlB0UvIPnOBBEpc2ZTBwBMUlpemadNouJHvWg9SEIZgKGA==","shasum":"eb97bd51436fab9f7c1b5d389197d4ac4e4e4d90","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.852f873c.0.tgz","fileCount":23,"unpackedSize":115663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZqovCRA9TVsSAnZWagAAvgAP/A784tJygvK3ViyGLOqz\nGwgliavmtD+NNxCEat7/sDnpJhxNpBmWTwy56aIaGJUHfue5gPaVmAecG3p0\n7MRS6NiDvPU1+IF+qmdL6tEijQ9zsj664R+BjTS9D7F/1ndEr9t0Rhon7bYj\ny8V/npzFcg+gMq5BkspXGsMCOe+dRR3bhzoQ6oidexWlAuLbNV7lPrlrS6j0\n6lMssyoHsE1kuNIUY0lD7VdUVL8LiHqxqfzvLAcdRCFcUwp7KJG7TjrRt7fz\nJ5VC7M/WoWg/ICtd2Hgw+P1i1fHBy1XY1/1pbBTCDmq9FbnPamiCV3mtcPoD\nd5Ve6blJdNv6QwM96LToO6BmPD6PaEDekxKfHwO8MVeYd8G9n9hGQhFVcXaW\n+RjJugqPBe26rJMYbuXiwhtPuVWhnox/sVJ1T4XhQ4cTeKlb5+5MfAf+lCo2\nx7PEHSIPhxEpT4pUeeX7VivvsrO83WGt9fYzDuuX8S+RndrHJgVubGa2boJq\n5EThv07b+j4CkqBjhyj6ZBFVP99zJLapePQkrCovmBGd1UkFa6pE2POhHqJ1\n+u/SOhiS+47Qtk0dkeVA0GVuTqBXJRCxiAc3dNtMNSIIyHJ2eqWD8pv6XlXR\nG8JBABSEyTclYvREywMBzs9TCI0dPolbrcqE/i5jJCR2OOC04epmeVySHQtz\n91qS\r\n=8+dO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDY/qWYLt28JifhIhtcKbQdzxkQpQNULSDLnRXdKL+XLwIhAPIr+tEsUOybohueW8hCyoGPpZpctylIsYqxLo4aAefc"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.852f873c.0_1617340975262_0.43598101941860556"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4a674a1d.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.4a674a1d.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.24609b822.0","@material/menu-surface":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.4a674a1d.0","@material/mwc-list":"0.21.0-canary.4a674a1d.0","@material/shape":"=11.0.0-canary.24609b822.0","@material/theme":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"d4f9464090813f45495113dfd52201f8c86bab3f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.4a674a1d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-/56/qV1j4GOgqtNdINxlCv8Be+rGWRb/wPGOdibb8Ygqj4POMvAgQWf8kt5zg2WYyZIkgAvj8yPU2aR1Hh7RUQ==","shasum":"45f63f38387d7f79ef48cfe86723608000b73fc1","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.4a674a1d.0.tgz","fileCount":23,"unpackedSize":115663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZy3wCRA9TVsSAnZWagAAACEP/3XNkjgsfAauEKLs5DiO\nDlvVVWRw6DCifw+Q/LRwJe3pKk9e35KkesN+fl/BVbVuFQdKDlhsulu9e+45\ntUoemNAUtux3nUx5t6g5IL2wJjsRgyA25N2h0FeAho//Mb/U35gI/fMssT+J\n16wx2SYcCIGSZjnJi/kkZX16bZ6P+IA/Uu0MkyhF26AOQRaPbrUSy4QEKKGy\nNANwHhl7X48O/J7eHmgyl66dtt9M47rW59Yr/NFO8WEQleBTZQTzM67LTrI1\nPFGaIGCsSBiz/5Nc9Ogd+DfXrmH8fMBYkhoGJgckWVPk+zwTDCpM1FitU1kg\n95UX8KjqWZ3JnXcN1R2ZzREtpJE2HklyGlyau1eyOzILDZ6uf9LtVNYB1dIu\nlaZ6+N7rY4MO93mcjsD/PIRyYcipBqtflUHkdiCSnbN/2kqBcN3Cte21mlks\n0CwX77VX6RxcChZRvg7BNg19nxXXxRK/Oipreri4K93TpI5xuGzYncq3Dcz2\nukjO4I2OKMC9NSN3zIPVS15UhKNFGMIFp8R7OquDPSY/IUK6j4wFwOAT26tJ\nsI49qjhVXeet+1kIdWRjN/jEK9iT9NHCnrTVvJRCd7A2h9pvaYXU7TukMbNs\nNGbdJ3tOwcihWh4flAjcfL3NsWBOhhXdYe3INtQnWXM8578mZWKGZGUaKHYy\nncQ5\r\n=+SUm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClSPUeovMLe7akJ5DmJyRcI/GLxvUUxBp1xXNY+bY8TgIhAIR3mV0g8FI3mAtMOfJeE7+MVwGwBxW1D4/Lz2XIeIRI"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.4a674a1d.0_1617374703540_0.9309695794412485"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5b29ff1.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.c5b29ff1.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.24609b822.0","@material/menu-surface":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.c5b29ff1.0","@material/mwc-list":"0.21.0-canary.c5b29ff1.0","@material/shape":"=11.0.0-canary.24609b822.0","@material/theme":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"c1604e99ccbc76c92a4371c529c43a4997f78c3e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.c5b29ff1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ZWhAhMd1/Y/OxFwz1bKwPjEp0FMELvgYqBZd33QYr4izQhHY3FzozeDPvpf3fV2y4+qdh79+lxbSHkim7OG3qg==","shasum":"e6fd929ee78a8d8b81451601042411e3ab861437","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.c5b29ff1.0.tgz","fileCount":23,"unpackedSize":115663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga032CRA9TVsSAnZWagAAS10P/1icJxRZf2++BvwR4wdd\nMQgKHctvlSPynUi77Xq2h4L5/hV5vq1raigJMs12T6gENfsXTL+KQ44Z5Exm\nNPe6buq0AeNji+V8BzxuuW5G6vG7aJP/CuRh0buXlGErg6LRFRgO0cTNJEEZ\nA8dRKDbS/yoHgo8bLXojEKUB/3Q8xw0ptcYzTtmmSaDoF2zEgBm6enm8o0Jm\nJmyPOBFWbk7R9sj18Lu9r0d9a3Xm3eX4Qr3CtVmwmZLvthAYOIfP8Vul659H\nRysmGWpNXtC0FiMVJMCfGoaa2UHRxRiVv1mPtF4E08voomeLNaQtp5ZWPSXK\nheud4pIDqbxYd+xn5fOpAlgvP/1LU6Wp/0qYFi3rPNHbMHh42ZwoS6UQnpsn\n6jeykAJsrIxzqs+LzsAV1A0WgtoR+S13yJfHmRyrLPePVKLEdqDUluO5fgjE\nHDys7yCLVnC4mGTdN54zh3gkWp5dJUhhmKKMAjAaERFnwpbQKKpx9aRU8twZ\nmRPFkk0k41g/CEy2LqtLSwwgz83MNIHSNZyvWHoB3CnpSWlT9Flz/ehKeclG\nY+8sd2ZyyuCwucrpT7yk4lG1iQvMBoI4JInB4ajJt+b4n2ed6sY6VOmR9hxR\ncQ53auYFwtfZRuT7hYJ8entphiV0/fSdQRd0YDrqZxOmenuoSbyeVKrMFykO\nIIdR\r\n=rjzl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBYHjSxvaS75WuHEnFmWLydnuClZCZrBi6MnI7SwV4jtAiAKSjZSx060q+F3HtuMbgwWZAsxGW9OlRghbbpkm/KzhQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.c5b29ff1.0_1617645046132_0.6902853261271278"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.583644a6.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.583644a6.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.94f50b260.0","@material/menu-surface":"=11.0.0-canary.94f50b260.0","@material/mwc-base":"0.21.0-canary.583644a6.0","@material/mwc-list":"0.21.0-canary.583644a6.0","@material/shape":"=11.0.0-canary.94f50b260.0","@material/theme":"=11.0.0-canary.94f50b260.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.94f50b260.0"},"publishConfig":{"access":"public"},"gitHead":"bf2f1c715105004d3849ec66e044434d48e08296","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.583644a6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-lxgDrYKMbtckBNY3TebV1WmXzI4A1KVrFTHNI9n6GckeJe+zJxZqm1gPfpZINs8KRSNrr4RlilHbqIQevC9jSA==","shasum":"34e7c294f81a6b1bf528684edf63f9ff29d6be46","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.583644a6.0.tgz","fileCount":23,"unpackedSize":115663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga04zCRA9TVsSAnZWagAAM/gP/RYQMPJ9l7bIZvI4KApr\nzRpyxINbCS5fDlex6gZ1QrTK0TN9zUe+b92UBpxYzbiNcxhEePyqKFFl6B9g\n8JU5Xrkr2y13XxBfvw5SSPhuStXSO+zumdz4mCOVgJpD55pi6mRK7nor59pZ\nqYMleVWoyg2NoWL41939mk9KJp8A3LpEM48P2ybtHIg9JcedI7FBDIK9asLq\nptp042831WtjfU3JZYGdnF1T5TNOMSAtvny6z//IfTzx3KXF0gAXF5KGvVB5\ng2yr0B2Nl/2X6E1YhrPeyDpmL919KUNBVwpm07Nt8kehqXW8IAU/AMVskjkh\nlQyh2CSUPK/OzoHMOzSu3AXLz7Z+th1h0VR059KWD2dDV0M8164ZEvZNk9XA\nHPFs0kpFn+o8JXtpYvJLn0UG+2juudZMLbku1MnxjizNqJBh34g5zfiFH02Z\n62iFcgMn01cTn3+IDJaWPb5oDOQTb98R9/ViQEkUEdI1ooU4HbVdEMfToZaN\nLc8rPSSpDZZkox8LUg8H/flKvpPRlmefRSw3p2P1hSx2rlORigQx+VRA4Oml\npslATdcI6eJPU0ZYDu/9YwngHhEBhSgRGLk7RgOuOGKFepVCSplO8UjwQaCU\nI2wnxw0MpVx40TYI+U6fSYuklmLQYWOSt7xPv3Aapa7tim6DvWDqvN+OuF/R\nyDgH\r\n=7aSA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8+pZdH+MkfuS0gnS4I2RrcKu0K660RET8xUvDT6hBuQIhAKhQ9iZjJvbeB3n68AL4mMwwbioGx/NdERkdXvJlNKc5"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.583644a6.0_1617645107265_0.5808850984336873"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.02ac1e6b.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.02ac1e6b.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.15604bd0d.0","@material/menu-surface":"=11.0.0-canary.15604bd0d.0","@material/mwc-base":"0.21.0-canary.02ac1e6b.0","@material/mwc-list":"0.21.0-canary.02ac1e6b.0","@material/shape":"=11.0.0-canary.15604bd0d.0","@material/theme":"=11.0.0-canary.15604bd0d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"gitHead":"c6e525b215b6043eb042d3feb1f6066bd536bd94","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.02ac1e6b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-WzK8W1iPkyexqddY5/PiduNcN4KFqeBYCqD7/j7j6FrSu5b7dDxVcnPR3ay7HKWerYajD1FHxTRmXLg7qiNFGQ==","shasum":"68a9cd697529c408853207636c57f4bbde0a4ec8","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.02ac1e6b.0.tgz","fileCount":23,"unpackedSize":115663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKpYCRA9TVsSAnZWagAA2ikP+wTu+rPMw+EuM0G6o9Xy\nROMJwvh8U99WMS4OFFbzV2abgptDGsTahb0OmfRjLcOOFk0DSfyJL0cVv2vG\nUQ0ZvoROYB5baG8r5ui8itQQoLgcTGt9hR5QyODXArCgC/i7wA/S2Hn9mFCk\nridg2UGIJa5iOvvqzWGCGweI3mxhmMbCskU1eRQTe1BhIth+5odNtF1SnRXv\ncoJOK/uWzGdINUbWgNnWDp1ao/6IPEqSEWP2AyjJvIp8emQCV1D8sBI8CdSv\nF/ZYD8Tkxjz4LFm+vevIAWq6FtPqaXqA4lk/WwRD/NqZ2AaoEnli1lklt5ZZ\nK6WmkwQ+Fvp0Jtovg//PH3jIfwAawmag3eeUlTymbK7vQ9n1uz8qAh4ayZrY\nUa0jahexo0WkFqMMl/KjnafLZaixSs6mx80oTMAt9qmxvyTLifGjZqvQDFxW\nYAvctuGgm/oFfWtQeUdxLNobm288wE6J6DJWj0P975IZQeWFiG9JbAcKOd9S\nJpugKjHBs9dq0vxr3asrP2fKe7obO/PcZn+zXCqEc+7NGLGA9zDnMPB+J5eb\njhmAlN3YlhUn4W0sAkb/I+09x+aYXDnLSJFBohEuivGvSnNiO2VUmLXEFdqg\nMm7MDpRpEaQMg4kd718bFw9a3950sPWoHcpeARqVDnZux+78WhTm34qKYHRu\nkbgb\r\n=Aro6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFtIOjRJK/ufGdDSlG7DTFWns367p9zWcabXwMOKGI6AIgV7xyZlgBcQ5tl3cKPU78IBPg1JnlPVd+PQLukqRvcn8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.02ac1e6b.0_1617734232180_0.7782779755262663"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5ac5856e.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.5ac5856e.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.15604bd0d.0","@material/menu-surface":"=11.0.0-canary.15604bd0d.0","@material/mwc-base":"0.21.0-canary.5ac5856e.0","@material/mwc-list":"0.21.0-canary.5ac5856e.0","@material/shape":"=11.0.0-canary.15604bd0d.0","@material/theme":"=11.0.0-canary.15604bd0d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"gitHead":"66f695ff77b118469a93aac22c76e5e558c242a7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.5ac5856e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-0POHuMTvj6Uq30QPPb/YNi/OV7Y0bVvSA2/z/2TOzqoFCbvcvlCAh/s9PKAlxWMgylK5MDQ9Vzn0lagBs5VLxw==","shasum":"aa7c12839702975e9034c1e84646cddacdba9039","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.5ac5856e.0.tgz","fileCount":23,"unpackedSize":115663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKvSCRA9TVsSAnZWagAAHFMP/2WHO4iua/L2sJ8vL5Gh\nXzopu751S0v2rcXgtJU8m44hpXQStBKTVXGtGSVEUkXN0l8ghz3PkKqnpcbF\nsuV8mJDxKYZE7dk8M9SD4dMQtYKmsU0c5/r3MT3oc/ktqe010w9d52vcYkZn\n1uQA/4rE4ZfNZXEPkDmhCTu4bUHbII4hyR38jgH0KitX2yGfHV3vtFslVBfR\nfgU2wxpa0Q6d9Vab56g97WPQV7g+5q9c92ghnrdB0teAa0eKCbp8HGRf1xBz\nAtNEX7r0PVWMZUQAkNENwEELijOozBo90Jb0Fmy73jotULLXtKvVbOnKTriK\nN5Jk4NwE6WrqgCjCvCgt+I1VXe3bPKtHlEO9ZDAOjxuX+AyahSsN4r/hkO1A\nWBvP07JEr1k6jkrEnXD/ZDAbMJda9ra6x1Nf7sXUIgkQs9EhxJJjmZf7+Bux\nQBwIjZAqCxlUf5wyPvLD/xkGmLws0K4RV8BbOaj8/AnWWPBgOOHuFoI9Anpl\nNEqv9GFMSgDYU3S/a1BQZcuQGcOEvILSxObC1c+BAUmhAGN/cbyqJZqN5FO5\nNx91wCxSEXw71JtpnlKZYsJO74zKzrHncSsUQ9ruWwY3DCnbNz4O0FHBtxo8\nkExY3FDhCM6E5iq+WrvWAlqKU3kj6nSpjeMEHaXzlrK0/0aajzlEEWevEeYI\nsnWU\r\n=dcGb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDN2EMwTfoOOyBk6nvwYP9DWkcArQesW+2rdNhFC0m5kQIhAKvKeiaVQuvus6VHEkgEXsnAzfOp9+oBebIjZDBWf7iL"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.5ac5856e.0_1617734609608_0.722016126024388"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb23dbc4.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.bb23dbc4.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.15604bd0d.0","@material/menu-surface":"=11.0.0-canary.15604bd0d.0","@material/mwc-base":"0.21.0-canary.bb23dbc4.0","@material/mwc-list":"0.21.0-canary.bb23dbc4.0","@material/shape":"=11.0.0-canary.15604bd0d.0","@material/theme":"=11.0.0-canary.15604bd0d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"gitHead":"42e5f906ec61897cd0de7e0e19e686d807408d70","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.bb23dbc4.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-saupEQJEod2MDcaZeqY3uQkDbhPbAAe2JJe87zDJEOrJ6JowWnBXPACQt0qe89uSAKFEP2bvaKDPzffK+yX5FQ==","shasum":"1ac8d76cbd4ac81882b3f7960ea6225e35e8252a","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.bb23dbc4.0.tgz","fileCount":23,"unpackedSize":115663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbiMTCRA9TVsSAnZWagAAxOMQAKBhsFgTeZsZIhFCThrW\n6eoJyuJORMNgqbYbo8KwXgivG1RsuBxk4iKCzKoeZWMk2fqpn7S0UlwmQD48\nA7u1C2ch0LD+s5j//JMLdgQ4sEUNHAXqnvbmJVJy/PCLLVe5UPK3fF7ogO2Z\nVydYqKCrC5u4qV6gHg8w0qT7PIN/A971Z9w3KXLp13JKxZ7HQor4PduvvfgP\n7BmVQVZDBNEObx9zr5Z3q/q37EREzCgkv1l4AC1RjwjUSbN2tfR0YRqJPcSj\nR/Nmsmq8zVqlpZGn5caiXeoQ46swYCq6gVMvZraRkr4kXkKjuDy9f2bGiVom\nBh/d8+3yFd2V3lqd0D9F/ICekt1PWZYmBWb8ZSVj4q1IXjDqu6NvFw0A6/Ke\niCuKag+H9yGAXk03+AhLEgcO1ColRACUTwcKRqfOyAQXpfaLDzx6hDR4TPDi\nsLuGzrnMnlR4xaXDfSfu4R48Ye2dKF55lZEsQ2GOpI9oQwH7J4oGfpz+jIMN\nF3z27qbIb5bLUOznq+wKSYRjZa75odsUsiqHidLDdwHRRzJ1/pape0ip9oML\nT0lBWmrVtqBMzcOdylwy8JIcm4W6QnK+Rzlf9LNZf18fuqeB1F0OTXdxqn3g\nX9yUiTb15Mur7Qsq4a2dpQCo6mbqiK4L0sy/1c6W9fGwTyKA53pEMll/CMTs\nFFhq\r\n=iFI8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVc3PKeUJn6D/9yRXTgBRlHKNWyNYWGGFsCn+74pNTrwIhANwsqQc5moBNGLVa3dUTc0moYmtUzAoSOwAuOZKXYWJY"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.bb23dbc4.0_1617830674640_0.3116280386476822"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e539904c.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.e539904c.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.c91e8d141.0","@material/menu-surface":"=11.0.0-canary.c91e8d141.0","@material/mwc-base":"0.21.0-canary.e539904c.0","@material/mwc-list":"0.21.0-canary.e539904c.0","@material/shape":"=11.0.0-canary.c91e8d141.0","@material/theme":"=11.0.0-canary.c91e8d141.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.c91e8d141.0"},"publishConfig":{"access":"public"},"gitHead":"0522583b3f6a950dde45ae308718f06d90d40a84","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.e539904c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-++im7q7sCVqaKnFzs9xbAFqj36yGDlm2Kf7Y6jdlYB6Dg9k3o6tG6p/2vh8qhLlP72x5ZVe8reIZDI0XV9bjPg==","shasum":"311f40fc3ec0a3808d0518bc3792bd58f6bca72c","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.e539904c.0.tgz","fileCount":23,"unpackedSize":115663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb0VBCRA9TVsSAnZWagAAVVoP/2dDnDuw+nvnKk3zVkXJ\nIz5UKpR0HFmAgRCFCt989tAzBRQu1p6tjwsOeXyQwAxWakM7xl8ELb62naok\nBSGH8u3LpIyiODTFUulsYU/TZq5FjmhW1TQBaLcBPa353SmGYthT70x6w6Fj\n/OPejS78J9CK+mgaTypSXIL+Oy4JSmyw2wEuVI9/bLqPy5qoHS3OT/PDsQfF\nMdcgOn2/6uyKyM7G+tDD21uYqG/QZtA5iWy+hO2I0Zj8JXj3ez9zZlguJa55\nv9DP8U/JUBDl64GOHaHtl0PyFhGPW83L0WoxHjjagQXyMk5C3G3r1RRoPlC1\nUpR4XbILNClHfLF2Hec+lc38lyjvV+ag4waVZv9e8be/fzsyaKw6irWh2nEn\nrXbmPi9hGYpwR4dzlDMs+gNKT2154PuLartEiVHTR0iP/UfLd98nhXusIfjm\ngNIHib4ezRV82r1iI/gYkiqGl3VhkKp+o94KRYl/y7kWGEfieeM722kPuFni\nnWXEWCk6cZ7GqSUkJCXO+fJmsNqcoFJvPa0VQitY7I8rJsJWGt2Ps4Q3HyOd\n4tfMoEKr9lxvW1LFZaaZbkmJkk3DBpP17DqIK2cgoxrDtzwlgMzHiYNoGmyJ\nsmFIPIbnLTWWgMFzv8nZry0cS0uSRy4cpqIVYh2TOX/slRZd2t0xH8SI0i1/\nHO0U\r\n=08c1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHxCT+XR7eD9C6It/ljOTvtusYc3uqidVXXnCWap57WmAiBmDHF/i9btY9iNWH8Y0ckF5sjI13N2lzuorUpdEelTqQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.e539904c.0_1617904960815_0.25170809537475125"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a93ae333.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.a93ae333.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.b2fa996a1.0","@material/menu-surface":"=11.0.0-canary.b2fa996a1.0","@material/mwc-base":"0.21.0-canary.a93ae333.0","@material/mwc-list":"0.21.0-canary.a93ae333.0","@material/shape":"=11.0.0-canary.b2fa996a1.0","@material/theme":"=11.0.0-canary.b2fa996a1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"gitHead":"31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.a93ae333.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-zcUSznETpzRh/LAis8ds7D6u8hOyvTh/1aYLl14Q0TXMS6HYlO+oFM1ROVwmEyYLceK/N6X3389GCkmSUbOjPg==","shasum":"1d8054eb8b28ad2fcacdc7747f1994c33e0d353e","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.a93ae333.0.tgz","fileCount":23,"unpackedSize":115663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLUmCRA9TVsSAnZWagAAV5EP/j+kQcJa0Qznh7n3qc/m\nqizM1iOyDdGGp1+OmfoNOAu1wkf0tQ90TrS7mwzjqSsKDW3qExA8YihqhS/o\nZKTvuyRFWmRAUlPqX14zOSahCugTBdQkA1zhFCJ/Qr3jdwq8gipjhI8N3lT3\nUqvJkqByeDewpkH9QUpTQAL9EgF1vz8o6grdwY8lRyIPUNkluwibhjEywSwW\nsL6wxow+w+sqt0ivXfa/K3HmBjDLddVvLM6KT79xf5Qs/8r7Wa4oXPDVboRu\ndJy4sJHPocVVpLffqD/OhxanupnmhuYKnNxwxI3YB0kdE/wPX/7EUgyzINGO\nOFWNO58iSCzF8fWdKook/2mTQ0ujDeQdzanZKeqMbRArwhWBuV9OifG9WdnQ\n3thYPDXcwu0oc0n/RRmmWzEPdsBQVVlqwro/q+Og2nmZ7dEwpDMWaW8fqYgJ\nb7NDDj+MI5T+mg0QSdo0fvji+35GEKAn0sSNVhBV3BbyERvQQedvPuwROHFW\nhBdLzE/7+7lEvxkbokv2Z7PGLIRlN+itEqXRc4uP48ZdgxxQ2Tk0owaWnnnW\n6VX9AyjHOr7qWxKeHbQDfTMMf6PThEJ1PqIRTbwTcSoB6zARQ0lag+DSp2qQ\nS1zJhez5czdDonKHHPmRq0vUFAys5hdDQ1tqkJwHhThzMvTmUXjPdFlL2Qk3\nR5xC\r\n=EBst\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBMiIsfua/ZPjJkcPK4RKilbkTzqG36J+L2zIv1yB6gmAiEAtoPI7HJlrfKrhDL5tmfp6V2wJsF/9ExxT0O+6T6xm2w="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.a93ae333.0_1617999142399_0.035451108407952514"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e142c144.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.e142c144.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.b2fa996a1.0","@material/menu-surface":"=11.0.0-canary.b2fa996a1.0","@material/mwc-base":"0.21.0-canary.e142c144.0","@material/mwc-list":"0.21.0-canary.e142c144.0","@material/shape":"=11.0.0-canary.b2fa996a1.0","@material/theme":"=11.0.0-canary.b2fa996a1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"gitHead":"135f2f0e24347fef74904a437124ccf8978e20b3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.e142c144.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-24V8w6GaONN1FzRn+nWYXZ/FJNyWW6FZVjgwhsx5wSkcnCjREJOXi2BGr2DgnRE1VaWlQCXzzGrlm7rkE3t8Xg==","shasum":"517e24a84df89721f777ce143c5cc6ca1829dc03","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.e142c144.0.tgz","fileCount":23,"unpackedSize":115663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdF5oCRA9TVsSAnZWagAAFrIP/jNkVfxbxTEdcu2RBUde\nlnvD/tFuXgvY02b9kABVIqQVAThowo1staWmBgh+kimc6dpp3mnt44dOUYvR\nD0axWtdde2v6Q7bSk8KO9QkdQ1Pk+rdE4eupFJsxZCgYqU4GzFKqza4+q5+b\naAvQr7pjMtWyZGNuH3CSLNhxh/ECaJyBmQEhy82sc7JkOkE7kKtVWF6zuUPD\nP2T7SgPQKYjyD/OxZEpMQ0vndN+a/PfxF7gDW4hg0Pu6rsDoAQ5ejUt9y10Q\n/bvvEPln7ep6S7409tKrZAjptBXbfbro50/GfngVvwYGBPr2HDmRJu0diWKx\nj0vMvlbPS5HMZMOvhOriwhRvx+9kOPGIy3YTm2gKdHGZGTfej8JaxS20Qw4l\n/duNRo9szs9cq8xM+g2jSD95P0zVNkz4PqsHd/EkjfjYdPK9DKG1F3xh5woo\nNzpfvUwIgwyTkC83Q3Bs8zOnHrULdURPIrNZNb11pHrX7Y2AFtGdllEjYIVR\nAsNtqlO2a5xzCzfHg57Rp/sE0WxXQsPEYn2EqKnU2AIQWR5Sh30ezZWb5yKJ\nHw/KqU9wxNGxid1ZETtmDlPfWd4KyO5A0F7VxmqQhm+UsycBK4KTDm6tRynw\nqeAY3NlPnK1XqS0I+5DzQL9S/PjsmW44R02pA8GUQsQZPX4pvntBdNafs3eP\n+xJ6\r\n=zUsb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGal76SrpFDIltiEJnScbrZDDLDaFjP0ywTatWgoY91RAiEAijzKs4qrAszVNUOU9+GF3ZHBvZxTg2rWDGcgB75Zr18="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.e142c144.0_1618239079739_0.6389464295056526"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.382d7eb0.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.382d7eb0.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.b2fa996a1.0","@material/menu-surface":"=11.0.0-canary.b2fa996a1.0","@material/mwc-base":"0.21.0-canary.382d7eb0.0","@material/mwc-list":"0.21.0-canary.382d7eb0.0","@material/shape":"=11.0.0-canary.b2fa996a1.0","@material/theme":"=11.0.0-canary.b2fa996a1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"gitHead":"22f558ec852007036c1b01f2d052ff4512cfb420","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.382d7eb0.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-AfDdZdintWlPp2DG10U6YHOtMwUBsUtNv3cdfBe4DXR5tgj11jE1XWwMkYWSTWwIoFXRJNwj2JlcKymF2VSvJQ==","shasum":"da239c5798491ca87151d6475727cde6d6057a3a","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.382d7eb0.0.tgz","fileCount":23,"unpackedSize":115663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMRPCRA9TVsSAnZWagAAVDEP/3hB5n1SARu64BuK2/xQ\nUYTRlCMrb9udpt0cft3cIWO0fDaECtOjnwmkQuj7owIjS/+xCk7x/X0fvdna\nuBZeKOcYiD3SUIzdDj0FByGkxsm/qGPJU+uZItx3FOS23cLuI1MsEKUTKAQC\n5b0EIMo9uoAZ88e18qdwAZHSKy/4RAScBsuJUZUlR7Qo0NK+c+uG2yooW1+g\nyNBLm39cenFDivAmZdnWPaM8W83gfz8IgQd1+rnkDMjEwbDXnb3pFGo6mhxe\n9gWkU01mZ7lWP9M4zBtblkucUDv8cQFmInT5hjGjrTLAcOpscWwKpjzxM0ec\noDS5Oan0Oqk43ZYsWl/QCEd64EQKA1fB+YPbs7lBB6M4IXz/PtZyCtA63pCw\n7EasjkTaz0kwJenBrmH4H+sYVjbKaL8CcjIUq9ueAHnK8PzSJvMKGOXp9BHe\nZBVO2zoq/icmtYz9D1S9yWYDZWrIPzvv/Il2W99UMYVlJPWOUUC7zYuGpTO3\nYSqoGA+1c8cRUMMb+/e+AHEcBbHvcDwK2RSXzS+2/oE0TYiaFpFjxGTeu8rG\ndHK0PZQ3zjtvngZuIXTlrapO3dbVEdK8MtWSnX2NCRKBPSRe9SCB4VC3CO0u\nakNoIEujFPcviFI7BepueBL6CyGLO5GbHLuqjce69qKI1czp+/sJHznV25vD\nX+7F\r\n=Z959\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBKXOSaAEoSV//QTwhIztHON0ys+cnUxEhfN/eZT3btcAiBTtPILWypHthR1IcUgPSmkG2E5t8VByFtZVzWaGoLHtg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.382d7eb0.0_1618265166971_0.15418183458351709"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b16c7885.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.b16c7885.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.352b295c1.0","@material/menu-surface":"=11.0.0-canary.352b295c1.0","@material/mwc-base":"0.21.0-canary.b16c7885.0","@material/mwc-list":"0.21.0-canary.b16c7885.0","@material/shape":"=11.0.0-canary.352b295c1.0","@material/theme":"=11.0.0-canary.352b295c1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"gitHead":"effabeb19d8128aa03c36be651c6b4eb98d15e9a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.b16c7885.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-i43Xo3hx/nXipqFiZ6pltf+FSPaeht0D/GAuQjY2gYC4ibRRHmZ5y1WVwKSsNjFRVwHvJJypK/T11jmF7IXPHw==","shasum":"9520a19f2c8f488397afda77d193f0f96435647c","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.b16c7885.0.tgz","fileCount":23,"unpackedSize":115663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMw9CRA9TVsSAnZWagAAAUkP/idtE0uF9ftR6bMdPthH\nwF4SpH6eN+G6iBmwNFUn2JATCOPz1hvKqd64UlkcyEVLFQsmQyBFsaTaf4g2\nciUS+saDZzeaaEMY1/8VtGYb0a8ehsC9iKCSzzynMv9ZiEJVW6dAz8yM/zxb\nWPkP2VO5LdTtjBLA6cmY0w11vHO2q4oBgKErAJcG0o0NtnvK9/vhDf6jNvQK\nPwub25fbXPhRIfd8TRmNdX3qv1yDtTA3hLbiahp4xIjKNJgPSRTQloSlF5Zh\nd6lAd/Zkr9wg9AXM4JHxl5XMq40LI0EeOeKzSePl0j+Yrgy4ruMeyLZlyRlD\nrq2+PfEeWS8v9lxf18RCdJ5/WzmcS2QvkkZDdNCI9BzKwWaWhERwc6/mqidP\n79TtwqqrSMTSoZg1eANOGt1cfX3LLJxIreUqwKh78AcZfsnTp6sTAEEyd52A\n5SFgD2X8hLiEVBaFg/nsJWiY8kKWx5cw8EahGxcgf3NX1hkhdsA2yMDUA/d1\nCEWpeBOd7VzJ/eFpNiMYlVz2lJX/GaT9SZP4eoM83VsodiDDQy6nB4PPLU5b\nPYkF5mPxOQ5xJhH1XiTuiH2IJFqULM8c4vP7VB2C/tDbmNn/8Rz9wpFQ4W8z\n5bzosnd01IHQoKr7fEDrD2BaO8iNYx9GEDuBXTuiCyfF933J7nXfhsxi3wnr\n0oKc\r\n=P4qQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB4lyzVar1ujdw+1EGNFqKkxAe5JL+zbZG8Pz55xsPwOAiEA5A1pILWyV4QGYo3Sc4zruRnPF47WSqeCzTa6mIrwUKI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.b16c7885.0_1618267197101_0.23933864070863553"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0e92782b.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.0e92782b.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.352b295c1.0","@material/menu-surface":"=11.0.0-canary.352b295c1.0","@material/mwc-base":"0.21.0-canary.0e92782b.0","@material/mwc-list":"0.21.0-canary.0e92782b.0","@material/shape":"=11.0.0-canary.352b295c1.0","@material/theme":"=11.0.0-canary.352b295c1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"gitHead":"7c46ee6728f96c896cbcb981be39309e7fd3f60b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.0e92782b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-D/GCj9GQ5kKHN7SZXkUb2SpO8T64MyVQfRB/XpXqU+LPUhnzAjjdAy2YHWPtPuPHpxG3RcR4jdqVDC6uyF3Aow==","shasum":"82ec14af04dd8139f6495104eccb3101b3dce26e","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.0e92782b.0.tgz","fileCount":23,"unpackedSize":115663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda3bCRA9TVsSAnZWagAAoZYP/3bwkHc84GL6GCHQTBZP\ngRY5JqZ+zrNVWiWNvGTFz4TQwiZJvOmrpI+BFIt0P3AaW3UyvUsBaxKI5T0H\n/mWZg4QnKN/ninV8Tglh8HRrXvefEI6EE8he1E3fjige6V9AhVrqIR1ElT5i\nXmlkPLvPuwebXsd2O7ZdZiGGZrEFBvlwyEriGJnqOXvqw0FuAh0uJoiRstlD\nXFSPP59rDxEZKAZ+mBp4X/aHaG1hBX+fVRIM1bHk7rld8VcO46VqR6IZJXFJ\nSiFD7UfkmRla2fJEotRiEVwn7MlKBm79uBYcwjoPPbKLSgUy0u4lYv6GpLxG\nqQY/qRIL+rmjzUnRjJIXlSySAxbmgreR5Nz8Txfluw0/UlgEtNs6C96uRKpg\nHaUbsc0P7oIv8puNZ9AnrOchDp1+oB23JuVZ5Rg7GWx3wotZq3RmMw8zvYSx\nIAC9C5dD7jV/Lbstzq8Qb/FFHm/DBTkudAh5h4+Vv9QHxWjLQKqb8m6a909d\nwXTctlKrHlBhcb2caIeC0M4xaV+agAVSMqTzpp9eTD6cEiJX7J7zwQ9s/nCg\nrkRk67H4M19NiL9i/68c/mu6qCf2EcocLCvsPAfDtYdYNi0+PHZm0dD8flIP\nNRku0NdYE0n4RscwZI9XvcHj9gvpCWQUlIiL0xcz0pID7GFwYMTGTaxXDug1\ntz/p\r\n=pHwS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA//aisjzGFwfbtAjutd413joxMxZISnAjrdcg97yC5YAiAUdVGjDZlNMRnP8+i8HgN4+FvYJhXXHwsNMQh4w4CYAg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.0e92782b.0_1618324954765_0.5510859022071555"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.70b3a072.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.70b3a072.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.352b295c1.0","@material/menu-surface":"=11.0.0-canary.352b295c1.0","@material/mwc-base":"0.21.0-canary.70b3a072.0","@material/mwc-list":"0.21.0-canary.70b3a072.0","@material/shape":"=11.0.0-canary.352b295c1.0","@material/theme":"=11.0.0-canary.352b295c1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"gitHead":"12958287de673f6ce0eb511950c61be3d1a28235","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.70b3a072.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-J0G1cJDPfW/wM5FU9Oi1miu1iBtMdtujmXrOQkrdqeMYck2IZmn13LTbw/8E8JRUjPXngIAipN4g/KY8ic2INA==","shasum":"fe5f1c6781447d27cce1a31c32a469d9c02a3497","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.70b3a072.0.tgz","fileCount":23,"unpackedSize":115663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd2wwCRA9TVsSAnZWagAAyDIP/A+czqXoxKHWGa/Hjb7Y\nEJwi9oqu48aPDoNccr8jTvC8yiUX4+2qbhX5/NgM8anYxKhSSYvuLD2aEQZ5\nNye0I/JKnBvdo1LsXAe5qNhvfOiATb5qCjJQXZd6TJ2LRtI1QOuwncHMdvt1\n1YkKdx6rEmjqXpYshUMH2bHL9/5amuNCyThWaZ58DjEZUfzGni8NnGV0RjXu\netrcld8SzlIN47e0g8h+/hlZVmEvXFa1jWT0plbngIM4EK8fL9r1q9c31Psl\n3rFj4eKfFKwkheTirnaRfBZBUWC5F0qk2uLKUUj3e5/bUfIhv2CY13WCu6RO\nJqQwrrFmEAIPazRup5qQwpSuqm8w0XxQxEpyOLx/DaNFNs9c30UPh0EvZsq0\nSWPulC1+J1J3Mdp1bQG5dKaSFKFNnxu14l03u6jwiPudkkWyjpURD1LgfGpz\n0lbhNqRBpT68vElzvMzd/MrzpSPrvAgn60xoa8ecUo4pVV+/7as0NnD3SDUM\nzaJ2M6/rkEmoYvLdkkh4amBg+Y6kJZuQ1HnVzwptqEFtlTlMPA9mf3Jfp7c9\nyfMgR2+Vm8inuLAbOjUtGJDbk3BH4UaydwyS8FSOnI2BMZ9rO4dntVLz4xJU\nB1PGxy0dnieTEURYM2OI4NVvySOkYuV33r9i4/XfPBGKUKCx19B5Xj3G1MKd\n/w52\r\n=M0/Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFhdgY6Q981XG+7POVxjSWdAw+0ZpwzjzoSdCldJ+VmeAiEAplwDnl76itw/kLBwzSow87YuKu1uU1EbAlLUToIy5yA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.70b3a072.0_1618439216456_0.011023112602568608"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ff79b092.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.ff79b092.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.3793a3143.0","@material/menu-surface":"=11.0.0-canary.3793a3143.0","@material/mwc-base":"0.21.0-canary.ff79b092.0","@material/mwc-list":"0.21.0-canary.ff79b092.0","@material/shape":"=11.0.0-canary.3793a3143.0","@material/theme":"=11.0.0-canary.3793a3143.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.3793a3143.0"},"publishConfig":{"access":"public"},"gitHead":"88513d2e247534891581014622ab048f4f2c52cf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.ff79b092.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GdxphopVZgrdnDaUyOQD3jaWx5t875TH+rbFu3gL89lK/CCvE9/YZMIKb1bSsy1+rsMUzZmlRu/ASggMLExo3A==","shasum":"9cd713ccdb56dd4d0b71c0fecf7db4abc04335a6","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.ff79b092.0.tgz","fileCount":23,"unpackedSize":115663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI1aCRA9TVsSAnZWagAAMOMP/1gzhqsP9BkChDdVXsxA\nCbHplLNVbLHOx1E02EbcOfwe7yOBQV6blA5ye4KOcZfOFactZKQtp+mSbO8R\ncxAcc5Efb1r93CnwDpeniIjvTDqyrru0Jsl9VDr9DRszE1lCD2rQU7pW/eMG\nh1lWEWJggi+9xaX7vBsJE0WnNkFLk0putgbUTHYumQhGyrf4Ao8Buj6MaLGg\n8tjnPKN5Av9P2GPl3ZLOE0uOcXeOnPf8f0k4uBgKCWBZjvCOyjOcw+YD47ex\nme/FJM6eo3F6TIKfUkFesL2tk7zbqlx3vEenGItIZjHYYTrg/q8q3rlGBian\nkmaF+PmFTdWhLf9WFi/8HG+ewC1xy4orRLKQE2Low+tx7VYRL97wGcTXQSw4\npEFuDE4EfV+oTnwIitotdE30p39BM6TCDs+i5icdwR7ltC7BWCEY1/Q+Tkjr\nXLEqUT3pS7D907GEgu5r+Zlu/ja2bvFkQ1HF6BbqDclj9tqh54gioSFC9tgT\nUhlIK/EVW6sVB+tEttDAJhYE6WjTz+vxUziwLEiNy7dnTDhvqtioqaN7d/9V\nBNfemmadY3Ze+WM/f5z0LjEZlR6zzZDG8aePK40sbUKB9UWi7HBqdUb+wFel\nBYbOhaDnMipLzpBkCV2P9NDTVirJ+JAB3JBxdXhgBgA8IAyyxcjaB3K6mgbw\nv1TA\r\n=KZZg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGstcZCRAXEJilRjp1zsiSCQVbRHBlT4WgScffbIlokAAiEA/dCkilqlc339v0kNXSYjXdsiTUadH3AGRMk2Qw8HRN8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.ff79b092.0_1618513242435_0.1506691284472561"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f35b2fd7.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.f35b2fd7.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=11.0.0-canary.3793a3143.0","@material/menu-surface":"=11.0.0-canary.3793a3143.0","@material/mwc-base":"0.21.0-canary.f35b2fd7.0","@material/mwc-list":"0.21.0-canary.f35b2fd7.0","@material/shape":"=11.0.0-canary.3793a3143.0","@material/theme":"=11.0.0-canary.3793a3143.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=11.0.0-canary.3793a3143.0"},"publishConfig":{"access":"public"},"gitHead":"2b12bd76b8558ed1f827fb23b46af6854b404f91","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.f35b2fd7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zZ97C/SNiYl0HKI6BJGikyXHyAyBWEmPyRs9gKz7VsAurIX/VdFIP4OWDbC3rq9hBnD2aTPXJsyC6d6O1wqplw==","shasum":"3916d457b3c5d62770eb54b12780470d609a7e04","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.f35b2fd7.0.tgz","fileCount":23,"unpackedSize":115663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI/ICRA9TVsSAnZWagAARroP/1pE/7FARX48faBH6ZsT\nacQCRIhnwJeHOu6UXa7aKfClFwvQ8KxlqAPIaYNBHg6ot6RSwzoFY7JIAFAL\n1QE0A6+HMmZosmbISnjdMghJIGmMX5f1mWdSDq+DFlNiNRlGoebFgrE0HZnh\nLSOgUkUnPXgdsktjMhH7jZyPNmyglZrBim1CBUP2exdpW4JtHM/Xt2ZwZxnN\nEm50I4Alw/WkyaA2iYgiqaJ6nLKslUYCzxKmMtaawZTXIsyjPxV9vKMY8Dxr\nys4LSKiXAeGvJgE8hmUjV67TyvYifnBosphVIRwQUHvNPvmbKkZNniG8dDtZ\nRf0YJE4vAKPE11fd+GbEXE42PI6sOu2Fy/TfkeoZpNKH/lp77YZ/vRVZmUNp\n5FLBC1BiG72AXNTpqBo53kfAdhIB2U7yaqUBz/e2t6yeFryvval+UzlLSD+X\nUXt8vxNgEURIKJ6Bdkv2vEESGxYRk5vFsHuDqQK+SuSvjioqJWLjMiRenCUj\nRE1Jv5fAJ7hSbCHoepI0Wh0CXZ5V4C6lOazJhVpKcMagbDQpNx7m7tEOEp4H\ngJciPlAwEJFl/1JMTwTWPeTf3FTgqxrO3c0bapKYQA/gYc0L4ENgU568xhnI\npR3Y/8ZPjFO2HxH4+V2NomtpaSOD7qEROSM5QHEAiOJ+XbrbH/mEbpb1bvs6\nb1Fh\r\n=CGB5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHXa9vOmtcbwAQoJbU8rwFC2QppMeKoe/aJRty8izVD3AiEAqbDJe0ai7HlibgjzZlky2Mn8KPBt+VM6o3Javod0LvQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.f35b2fd7.0_1618513863931_0.6248734780092853"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.11977cac.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.11977cac.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.3f342c3f4.0","@material/menu-surface":"=12.0.0-canary.3f342c3f4.0","@material/mwc-base":"0.21.0-canary.11977cac.0","@material/mwc-list":"0.21.0-canary.11977cac.0","@material/shape":"=12.0.0-canary.3f342c3f4.0","@material/theme":"=12.0.0-canary.3f342c3f4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.3f342c3f4.0"},"publishConfig":{"access":"public"},"gitHead":"30cf21833b011fd8946bd6853a20341579b79c96","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.11977cac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-OICe/wbJdPojL1cywl8ZGVVgzlNW/eSOoDRRS0qe2j59fBPLn+UlqJzhPOIztmLaczAFOyvMaTCDr3DPZ7NCdg==","shasum":"bfdf8c6e76fe2963d7dec905d27fcb1a8527b6b0","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.11977cac.0.tgz","fileCount":23,"unpackedSize":115663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeOFCCRA9TVsSAnZWagAA0x8P/RAsHZOTQcn6q2HnsThK\ns0zJwCK782LRXIJ5sgdcuPVgl300azN5n7ye5FW7MxghaO9REcLz/nnEkTzN\nOwEpzCAlx9OJgIH8Mrv4NngHXjubyJKRM/F3AerFW8eEAVbfvdc4Z4KhkgYy\nOTScFjA4vs84fQ2qGe7uHdYYjhoDdJmsaXjWaGDfJSxQoUIvV1a+UUicr1sF\nJtJCPZdUOLManpeMxE5cOlpFa3/LPNlIwVzDpDCS62Ywx6TA9HgfbDXmn+jR\n7g+JQ3H/kRnuFUr2HOW3Xqq+cnoInRZbJJDXy/0EaaFQNGFIL9L20PBG6TnV\nsguNnc8OwP7HeMUYisezShp80V0GY8UvtubdBgBMNy1Nh+jA/w7bQYC9f/SS\nsQhHtK+g/+O2UEnpvKV3KPTQjlyFN8KNs28t+1VPDxP9JoumHv5bOq6S5jRQ\nDLaiA5ptxhJHW6RqoLDHqQtq495ZQZbRVc7zm5FBe4c22boEfxFFhPX2TnkQ\ndA8OvMSZosIGIqB0R2PxPFspFAjjb5VjRFCthRvs6Z4D45PPx1PYTZriMRAf\n8cMLIpWx32C1iaIp38TUyEXoX4u/KS+ibs+l3cBQsgIEuGtZXI2xfKU5Ef90\nqd/Um1cvjAzzWYltGXraBxlLNntnsOMXv3UHn0/JUQlO3ZUhhOH55yo/4MNL\nwLbT\r\n=Zk+f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCsxnKKW6IINEemTzmEyWBmymh1Djrn6lYXvHypAT9Z7AIgIf6+jMreF+8Lk4gp+1As7yY70w4iTeYeSyU390c1Zqc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.11977cac.0_1618534722562_0.518307700831443"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.018ff45e.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.018ff45e.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.cad489689.0","@material/menu-surface":"=12.0.0-canary.cad489689.0","@material/mwc-base":"0.21.0-canary.018ff45e.0","@material/mwc-list":"0.21.0-canary.018ff45e.0","@material/shape":"=12.0.0-canary.cad489689.0","@material/theme":"=12.0.0-canary.cad489689.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.cad489689.0"},"publishConfig":{"access":"public"},"gitHead":"4ac1a4ee2a06e36457a8412629422eeaa91183b6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.018ff45e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7qdtvCQIyi9n2+DaM495O7nFE3WrEMsmbburMiJXtrF5OevxPFZ6OHnnHkKButtZQ62onpOXl3cRlS4KsPESzQ==","shasum":"1c4a6ff2a53ca66d37c5f613672c0ca65450cb2e","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.018ff45e.0.tgz","fileCount":23,"unpackedSize":115663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggf39CRA9TVsSAnZWagAAsT0P/31sT+gDmYgW9zlvSrRw\nm2pzkfOo3eBRg02V4XLdJoiLw7xPas3Bmp/g4awU1nmguKAkEqUD+8IIGvmP\nSJzttqvX5nwWEow//PYr41k383+Yg37hY3ER4PnsambTfM8+Yyw7Br/WJ/Gd\n//BdQgzEtsICQTRfjqi5zllA01kA6HdcAwFJgF1YmLZaf29lknY8zjIgdZyv\n0sFCqQu5ACRoP3SQG+MGH0/IOQSu6Lpw9Bo3GNJ7V7LfiNjh+lGOFNquZzBg\nO+bZlALCXpmFF8HprQLvx+WQ6h8I+n6jW6jrFkVeTKlIJb47dpUPQT72U6e2\nSkOQv22QRHU55HkBDOpiz6gSGxrnsaqWhTBLY5v3onSEWn9g7qinrKz8GrpG\ny3ZlISzqwM1ci01Z/rC4wdzgvKFxm7za/ENVJobihJldZBFxq36v5GivPnDk\nK3zDixew1qOc5BBE1BY8ATAif3RKO+RdZo8wUGYQwENyKxweVJGq5MULTB7X\nJRFnnB3XKa3bcFXHJliALPGfyUJeMH9bN66niQAMlZSInvd11/7wtVNwF5yT\nnKzCwYlZRW/EX/uQVwrMiI2ACmcvYRh7CzHcZqK2Wor2djkBmRhch1nyKAxo\npzaiZc2zkNevV4dAAAlZmXQ4p7f2920R8Wl9W/o5bJdB6iCB9qQohot4muvo\nO7W4\r\n=PqL3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAyBOY2ziaeWgzO7pE59iJug0AktDYoig937Q/kSn1XoAiBdTvctGO7CvN+NZhOJnsKwnuiaIaf+mE7DbwxxcfdaUQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.018ff45e.0_1619131900703_0.381336674225637"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c99d1fa5.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.c99d1fa5.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.197f64fa2.0","@material/menu-surface":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.c99d1fa5.0","@material/mwc-list":"0.21.0-canary.c99d1fa5.0","@material/shape":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.c99d1fa5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-TrkJn21TjP3rbn/o3PlZIUsof0oHGKWRp6CX9XQpPtSeftCFlXUlSJf593HG+VxOeW6MDBQpcnjxRMvHD8Fwbg==","shasum":"8e030506d3ea8ffbf7363dace9fd8dbe779b1660","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.c99d1fa5.0.tgz","fileCount":23,"unpackedSize":115663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghxjCCRA9TVsSAnZWagAAoPMP/33Cgg3oOd1Wm2H6IQGZ\nZs8qgglt3hCpHFnkHrTkgJQwWc8232F7UbyWJP/jT3a/ebt+Rt6djq/ZWB0U\nLFqMiKqRx7TaUPD3SthzUbhnyru+GXOo5Yjh3CjvM0qAX5Ar3xymQDcemfH5\nsAepoBydftyKapBypIqckq7VOgsnv2+9XoNrCDe+gqjigrhVq9A5UvahnsuH\nHLL2LcCgS+C1osFWRBNZrPM6PIcWTPfRwI8j57sFttR3EEZChu+m81YrSm83\nT2tIeBxM3h1bfc3b6qyuIHfp9xeOgNdCKG9fCeMnupyXMOaRELwgpuc/7xHQ\nSNBzyQtagAXDb6ocdWkg/lNr48ickGvw4+If6mogg6tX4W/CN69p1NASDHeG\nFljPenqiaHzMj5I3vFy4uLhfMgphLlsthweN2Uu1+oyeRIlOldP7P7teHznd\n9uCVFH+mT8xafz2nwkTxwoaWfi3LCO0cK+G3XSYaKpSXpsL/9V7ixGbYQxkz\nz8Rylux4rvEH/xLBGNm6qhaUyIa4+iUjCSGQ1pIxr81bOEjlLYCmNmFVg16/\n7OxP48wFHhzmjBdPU3M5ZlBY8aI8SEjpfR4eiI42kWRdj1Jj0zSniBxxGNGB\ntNz9ioEt/G9jbnj9hTnXB1s2K8n8lH2mMHB5P9N5uIFMgeRSSI8H5+sYWaA1\nI2Zc\r\n=N+5C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHnr9rFgZhSVqR6icg7vdKw6TxqT+dyvwcVybT2ecDaBAiBaGUK3PiTm7WTmFctuTfvi3BAeXHv5lw5ydKKxYospWA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.c99d1fa5.0_1619466434187_0.4151770906583607"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.eea9b304.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.eea9b304.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.197f64fa2.0","@material/menu-surface":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.eea9b304.0","@material/mwc-list":"0.21.0-canary.eea9b304.0","@material/shape":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"5446efe110704f4464931aec816f98b15640db03","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.eea9b304.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4cmYt4Zb3C/Ya8IuM5v9++8KqGHHSCIWg8XSeZ3ozHEy9/QaVCb6zac6++k+QiWMwGVDKfsWoR+P+fEiNEVpyw==","shasum":"e6ccc8c2dc76bd8f067034864ee0add32179fc2e","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.eea9b304.0.tgz","fileCount":23,"unpackedSize":115663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiJX7CRA9TVsSAnZWagAAnasP/jneWq3Npejxhvg7SRaj\n6i4g12Whe2vyFNEtu91AU3vKjwoNsQ4HfmhUZlnPlDbpVb9Lk9WUy2OMM0y/\nZ/XOvgzXj5jEVyQ4VEMPfjoUFZxubbCjEqMOgnhVgzyogzGNB3tpNv4R6MWX\nlJnl+u/K0p48QrFzO61PCRhfVnS4CXBAmqA1unOSfj6ZX/MwqwFVNnBWuLPh\niAEEiVL394dUIR+y3xzQ6cNrlxWUKdaJDf7t78OOG2q30ipPnNVrOuWorhsZ\n+ZCbrZcpcOVEiuf7RHB0tPy3G63wQkw5GLXVvFCBKvZd2qBRSVWUMqGGEOm3\nTp8ghwuxdy2iB1tIjBe/3XEzEW3j1HE5SqPo6PhVblYd6NRGInxyDak50rYv\nNJvqts+77JPIZjDwFZ3lM2LaQQ62BF05DRfTv9owL9sIHsJ+KbLRK9DUOch/\ns5OxZPnAW+UpF25I4seGrTr3+SF2WVOIDI3JvjUJYuehL7JjcOPpZWJdh7OZ\nC38VFfPHgM/X4w83Gd1MDaWckRiTyi0TushCnnfjhBctiLGiSn5S2EWVg8kO\n7CCrLOLdorQ3KvLcCFGFjbk1cjg9PMYDHQKaMON8csXMySAVZdiMfUklYcBt\nf5lh+LKWekgPYJ3tRtEpZaau6iorAdHJhVnrwgx14meQbT3iYEKjeP9bztdm\n1Yms\r\n=eWEe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZ0BBVMohCXOhyDJw58QR2SiK13eBzS/niWKG9LZS1SwIgIObMCAqxUikIda0Ivj/a8ZFL+ew4gmnzoxbXxgKirmY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.eea9b304.0_1619564026711_0.4607002214828233"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5dd85d0c.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.5dd85d0c.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.197f64fa2.0","@material/menu-surface":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.5dd85d0c.0","@material/mwc-list":"0.21.0-canary.5dd85d0c.0","@material/shape":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"87fa4ee3a285fecb598e3c37e03178de68d79f7d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.5dd85d0c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9mexOliAdr2WT7/8z+1hOuyX8Ite41vI18Zg2XQ/yuCHJOeFoFJ6gQHK1p9YjtIy31iYjkBUG8ALYitEzMWJGg==","shasum":"819cc471a9a63303a79b6f048c8f44da86c9b2c1","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.5dd85d0c.0.tgz","fileCount":23,"unpackedSize":115663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKfiCRA9TVsSAnZWagAAVg4P/jqY03+O7oHacds6/ASD\n/ljCLhVRJz+dqI24gYHB9a2Fbn/u4GR5vAxOjj3NE5smR1Yt2s3E6C9czdFr\n6s67VyILowYVrGzpv+Az1STDJNOCwYAWBa2pWAfFMT0k6m213guqCx7O61YZ\nkeZ8mhs02OtWAQWf8ebjELM1GD90bnWWMZ7/HO0XWuQMRyqYxCp90KtXLW2V\naCGXBS0bvI1XSfBaGtiv8H38xpf9B1cnkkAosgmAA/lEqUN+HN+krEx4e5Wk\nvzL9zQODmVs3DBqyOWlE7oJlXY9Mu4qHFOXjPdNukFWBLHXlf7STutsUIl96\n8MgV+Crz9EjRqTDsPBu1uQY1D09hvFiDCxtfnSa+pLWJjifEFLheVcmlagd7\nUeW5sDzwMXWW6afJ48pDPyrFprHKQ7ClkCQgVTLf0fzDJFlST5uUUeIRv4vB\nZzBR6s41cynKlE8XIQsBDkJOMPjYaTC5xlkNtRtOzzCr80cBuw8zW3AtnmtE\nfEkNA1ugcHFNar5fR85heT0+fHuGqtjkC3zEX//jyJIbEb/2MccxOAILjTgj\nalZV3pibWZDUKE0I6IW0Hak/P5Fj/+sF4T9ShaBw0gV/JZnppW3d5Ho763B9\n6mayyRceOKojqkNRvAAwpvqT6mlZaIetWF7rGLO9N+wTlQdtuR/STblFpGQr\nTA2K\r\n=ypNw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBNCPKPUgi4YDQ1jXYd3i0ASOzqxS1nBY5XcPoYSEe6cAiA6fXUauqgS2gqKJmguICHZWcwrxuJnrLA88ifMkCiYyg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.5dd85d0c.0_1619568609771_0.36648879064315487"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.cc813cff.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.cc813cff.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.197f64fa2.0","@material/menu-surface":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.cc813cff.0","@material/mwc-list":"0.21.0-canary.cc813cff.0","@material/shape":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"2505c49d16e9b978469aef456cb53e6d6b265758","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.cc813cff.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YvqByIoJcKO/+wokTL+Ccdj9itF+GGFPfcxGp8oh+FNUO44gZLLUFpz2HoiIhLVwSMU5hoSThv9hY8n3imB28g==","shasum":"a826b8949208c5bb7426f7a73df5893b96dc5730","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.cc813cff.0.tgz","fileCount":23,"unpackedSize":115663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHSHCRA9TVsSAnZWagAAkCcP/i6fobfJw3zsaa2Vsik3\n8FvK6yoopjJx6eW7EbmtVE6uZOGJ5O+mj2f4bOLxwIFHtNUuQX7pt7ZF4pUp\nUju/KwoFgXl+QhZ6Fl+iTuKhJSxhx3RpmHSr/LdGPTSHBPJ9iN/r+hnaauAk\nYgMEH6SjlFKEQJx6jOj1Xglc2Hg2v5xMiH5atpaN6ifYsKjYFySCfUDrVvnc\n49yhwsGincGkQQjtnooN4m2RBbkF/YmtUSsTiVqJxYB3riEhvvNUpMELOKOX\nLEp/IkT7cHDM7K7yRVUSJEAcGs7kJX/JRDL9VJUFMHfxb1zJXv9JhR7QHO5l\nxX1dJqIbV+APHBgPBjIo16G2EKN2JV3N3WG9dkPv8hED/0rc5taKWEfgvvuS\nGlPxVyhAREqGaoMCiAVItqkaDem66fbU51L1y5xgRVvym5nl+bNm63LUCUao\nAbpVOUia2N2G2polEjHRmD5sr0wk+g30r+9UKMxuHyXm2v50Ez7ZiaNAeLVI\nNDkvxxWTy5xg1F5O5xIJeIvCMnbVl1NVdmbXYmsGwDHqiwxbCi5rpRzaYbBA\nIcAsdhRy0Q1r/168cu47IfzhttABUhIPkGVEXkM7ckZ++gc9SMqr35rOF1Vc\nW92WaAxEGCaWw4e6wUjUHNjhAaPBQVTVdP92x2ORdNF0eS+KvC7zyISZIeFg\nMA//\r\n=2/OO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrs7EWEBzFWrCA9xU8QrqWhZk2CRFxmeYGwkjJbTuK1AIhAOirXS8Dhgd73iOLkzK9L25HYOBWs5OMf5zbivWJbGnE"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.cc813cff.0_1619817606692_0.7678352013455463"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0875e898.0":{"name":"@material/mwc-menu","version":"0.21.0-canary.0875e898.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.197f64fa2.0","@material/menu-surface":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.0875e898.0","@material/mwc-list":"0.21.0-canary.0875e898.0","@material/shape":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.21.0-canary.0875e898.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xCaYL+vigzzv6TCSNvVH6QQgbmEMlvO3JK/ILS29VghGhcy1U4sXUOU4PEfwA5Z5yexuRYEp7BAqBXPw6qdkmg==","shasum":"a872b1880cdd4b4e79ebe036eda78ef7ae8b58a9","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0-canary.0875e898.0.tgz","fileCount":23,"unpackedSize":115663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHZoCRA9TVsSAnZWagAAnhcP/R1KFn8SAzJozAtJZ5dB\nqX70wTl1KAsOBVQuPH0qHvVRNZAnkgyVtnXQxtWaqBBT43/HsnXmeuZTtn4A\nm+Stqx3rR7yae7x7YnPgKgWpt/0qvet6cVrdKLp6MWHxay6Mw2M7SV2g1xrl\nc1X7lhjoFTpXt4ryGIj1MNV//ByKcufBH24Sl3G2YDqfJmWztGnbZH5AXQ2Q\nnT+2MMmUt4pNNrsypPvMNNfr1rxF4Fxk3tsnweDecB49yVeOZFGxjLp0aC2m\nJhAPPDpOykwZ4Ao5uV7gBzI3xEqaa1y6Jtv2vXvSQzlOXMH3zjUREv4yWVOp\nhqvq5HXvcSffbqY/+lU1ZoRnEWslO7RzctobVmr5pD5dT9jgiP6i3pqTwa5T\nGw5VEUxddpceUiv/H8eHVFZlyDJHe6KO5MWcFHKJM1tbbBMrwY620jOwaZYC\nRNin5wx0mrQfXmD0pVBlkTr+g/KOusj2EwoIR/M+FxKjUgf4JqQFfEaEseda\nnM/zW+kClQ+KeAHWd9hTepERWypg5u8GoaaGn7Sr/NMeThhZmxj6DHpHwdCV\nJyyedpjaZ6pVbzxuG2F4mw39lkIpG0Af6GxS1HjE1E6xkwNm+/N4cDTzerOU\ntx5fW7YxWMD1wY+AY8sV7B5UIbi+9NhyqF52oiBDBzYckpd9QmEgtQLtqLCl\ngH+K\r\n=eT7f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD45BuYqrTYAzk8ujpnTt2hBOlLs/f7VVubN9wSdmtE+QIgT1zUG6PydzL7flR1gKfvSgI+kgjUdcC3CFDVY6aYczY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0-canary.0875e898.0_1619818087807_0.7290097944884404"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0":{"name":"@material/mwc-menu","version":"0.21.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.197f64fa2.0","@material/menu-surface":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"^0.21.0","@material/mwc-list":"^0.21.0","@material/shape":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"8f1e7e1b886b6c6820c18c8cc26cce7b15fd2c98","_id":"@material/mwc-menu@0.21.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-dWYA1dFkdjvlVi6f+IbH8ItJZRj3fVFCqnoz2bKWn3eRE5W68aFenXCooRzW3MHBxUDBlyi9+2Scrbtoazap6A==","shasum":"a71d11aea5760f123af0a2a62fa305b1149e9fd6","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.21.0.tgz","fileCount":23,"unpackedSize":115611,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJmdCRA9TVsSAnZWagAAvs0QAI31h5ZkC7b9t7qcUNVK\necTQj37orfMXoc8wglUYi8a2wMailYNTtNd/P1jFbmfIhZa4Of/sZQNHbkxk\ns3Byi6QSinEdQO7kSHLE5nydlPea1dvGXzlWnN6zXvDpZHqB9rMidej6/7Me\nhgJ2oD1cPB9Z/Zo3D6l4Xy3szEzk1VMucgEkLWpJ1Jeb+dHHs3xwm+eA/cxm\niXnTgddMiVm+sF0R/xqqzl38UjdZqGuc5998p9uET9/nRyO305NpTU7pBPjz\n6S3uMWBuAnQWu0EzOsnoJjFuEjFu1o5AmxDiWc5WskSfZgzGy9V1SrhcqQuw\nB5aibmHl5t7cUyel1LsAtUp67h9iCv7EuEsRR+9o2sfHGg03lpW1ipS4SPhU\nvCdNV1KKc3b4NmRryHc5JxKoo/XOHrC6me10zxveV1bLlcfoRzG2yhERlUIU\nSBFXDP0zzu5FNWOS+BkFWDxDhBhRU0YSQobKgGxGSYHxhXpkVdvY1N3/f67Q\n8j1BC4GQDbFH9s3bVm6C11S7bpq9jItfaGQt5PLiZ91yeYlP/0b0VjkxJVHF\nB89vGnVfI81bBa/gNXwXwrLRfBUEx+H0xoJzvHaPKSuYoeFiiQWjh95BLU9d\nYRti2727o+0/RdTwem7E3tSn1mNfnbnclB1xrSD9QArG19ae9T7UX7utFhEw\nUGX3\r\n=jhOa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD2N85+kQU+eGgFlPJQSoF86AQm9ejMLUXfx98ICdCZUQIhAMg9kU3labp+U7kU3gKfDfqEucW0UlGSj+GoZuBJljj1"}]},"_npmUser":{"name":"taylorv","email":"brian.t.vann@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.21.0_1619827101165_0.04955532563336851"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8f1e7e1b.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.8f1e7e1b.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.197f64fa2.0","@material/menu-surface":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.22.0-canary.8f1e7e1b.0","@material/mwc-list":"0.22.0-canary.8f1e7e1b.0","@material/shape":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"346f8ec243ae13b28796324e6408721377829b39","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.8f1e7e1b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-02Tt4wjxFU+45uqjMzGpNmtr2/NSWHMWGycJOOEUnFaQ7ter+HcGjrbR/9224TxY3D9ueN+txGOVXb6YD/ZbZg==","shasum":"a7d3f25365304af3b229672339ab3b44fa0960f1","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.8f1e7e1b.0.tgz","fileCount":23,"unpackedSize":115663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJtkCRA9TVsSAnZWagAAb0MP/2/IrNdI+ifmoUFvSvAT\nrLnnSWmRwfDBJYxnyZybezcNRfCMPYbHlZ+0TIxyCckmjRiPYd2knWjIUEaX\nSUESBT3/BOKTw4SXDV3djRhvB+tUK/AJQKsMWsQuJR/5jXZmAyKI32rjlnBy\nuIQ0j2Bvg24yR2/TUN1kIHFcLRtXWOiMaBoc59O89crxnGIRKONgr5Y4OQt6\n3zJRbzuNrykoAekcA5Q1QUuXMuDHQ8qNrlrYl2W9LRfJIR1WMhqfpjozu7fp\nyr6DjHvMVrO+YL482a/U16xOmZfpRsZ0Nj2gCIoCC924B6O8EQaaZUxg95EU\ndb+Q8aMSVYDuxJ+DGj65JiD0A2/HuJtZAAE6qlzf5k/69g90pxz4SWtyTxhz\nIsJKPWuPHAgMMLLnlDkkL3hRdJ9+zRVChOgVwguEtdYEdSM6rAwpzCPdSRTf\nil+7v5k/Mf3d4aUhb4yg/jBhzEWkCc5B7dU+8pCChybWKUPXlpVQK6iE5dWT\n4/jRZYjUXtr0UKHecoEsdnuxyKEbqrvEfjrbUvglI0N58DZfNsVNeurUwf4v\nAb3JsWQFvxy+mKQbITLYz+cZLBsr894Rnz8zdyJqkvSiGvdnL1ohPbOupw+q\nskfj2Zg1bSCaN2m7GS2NZZt4Vov9jYgZBYZhcQ0tbHaIgRqrGYDpniRfJhme\nBWD4\r\n=NdVj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAU1/3jO04mTppVidWXP6pq3KPjSd8EovG+vMnO03c8aAiAVHvngq3pF9NRYdS1XRBr94I7ijJ3NMYYRt6G9bTDnIg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.8f1e7e1b.0_1619827555840_0.5558716687469862"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.deb0e792.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.deb0e792.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.197f64fa2.0","@material/menu-surface":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.22.0-canary.deb0e792.0","@material/mwc-list":"0.22.0-canary.deb0e792.0","@material/shape":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"7b8ce494b86ceb69e799a5ec1a9f0148075d04be","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.deb0e792.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-D3lZC3CpsrBNq/YalcoY5HSeihB4M97E1GII4cyxSe9MvhEVia+U8u3wnVMsXKQK8hLnwmtVIIHB3soPvxKLtQ==","shasum":"62ead8cfb265c7d1a840bea03fbab5fb550d0f92","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.deb0e792.0.tgz","fileCount":23,"unpackedSize":115722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkGx8CRA9TVsSAnZWagAAGZYQAIP8RJgbauvGP30LHIau\nhybobB/Gi2H5D2jH2bsvGh07k0lxli32bZbsGz5yFPkE5pfcALwDNI9oo2Qw\nPdUr7SsRc3ulWDbHFvgG6qXbUHCiL62wtbSWfDQKk0zpkcjR2yBAHxuRAgek\nSDFOx1DZwGlFLMTu2aYjFYgcRIbQL2+lH06AWJ8ddUZHHKPp7ZOmQN3KP6/X\n7iWK82y5rsp4uLfAI6pxt60oXFDw0t2sdocZbgJeYvCYkf9F7N1bDpLc2WWB\nJyoCVnxfZ69/8SjtxdzxKwnQo5HnKLT6lThUPJaRZvWjHxsiZTfcVB7dBH3i\nd3/siQayFWoZWgFD7a0mleSEqQKu5NUOmKtPBJ7aA8dT0W99GHGT6bDNV4+w\nWU5eWt0vsstgHo2C/vn1VceSKfy8+XmTul/g9jc6zU7IgpETzhxr22YT/3zu\nJRy/UGOd4Lp69YJ9OBUkND9onlauNhjg5EnrW4o/ZnKXvPyuoEbXEbQciiLE\nXCBfZVEPJVH8EFCqlPvI1nalXW0MDYlxSzUEbp31KrX3kWJa48hiVR/W+t5d\nWI++K8opkfBHZIg2BO2/UehqzYAK0iSN4YigIMCcCrSapHAcbxGhG9RnfYqa\n2bP/+NAPsqo1TFUAZd4CNX2Tg2c2RKulMySnt3eDu66EB1sW+Ly9e1lOIDTs\ndVRU\r\n=x9qO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCBuOtTxxHaJnwTGbiOFPHB7sSVQbx0VUOuzwYc7NgMAIgbIc3BwOqo4AdrJwD5ypVaCM67uiqHcKSln0JoHCf/Bw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.deb0e792.0_1620077691772_0.44083522943561726"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a3ff615f.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.a3ff615f.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.474836ad0.0","@material/menu-surface":"=12.0.0-canary.474836ad0.0","@material/mwc-base":"0.22.0-canary.a3ff615f.0","@material/mwc-list":"0.22.0-canary.a3ff615f.0","@material/shape":"=12.0.0-canary.474836ad0.0","@material/theme":"=12.0.0-canary.474836ad0.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.474836ad0.0"},"publishConfig":{"access":"public"},"gitHead":"1e819eb3a7930649e9ccc58d69e42d7d17e022ea","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.a3ff615f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-nX8VugzZVFnsxpoTUlnohPk1d1iLPS9A98BCNM+TmwJb152v0hx7SiPk0VqIHPi/8KQglmGbHsgZWBt/HHu4CA==","shasum":"9d876d85235276db1c9f8b05c567c5e8c1c0e228","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.a3ff615f.0.tgz","fileCount":23,"unpackedSize":115722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHpmCRA9TVsSAnZWagAAOEEP/RyGm7cfVvyhe+d8ioKV\nl99u6rGY1YCOMVdfWNea9xMivXOKkaoMIkEVQ866KsUEezgLG7by710ex3dL\nZXx9DwyStDGFCW1JgdVlUJVVisBvvT0DgCJjtj/HOlIsKZRPd69IR7XmCKFh\nRZFGR0C6D/fXCbPBBKmVvrS/D6RRUNuIXC+JvUB3yn+7Olrh6uhXjyjHqcZZ\nwvvDoZNKsgBPPmadSNpACbsJHSN26xZ9/kPEAbZBCHNPZ4jea2I5GmQELZCZ\nun/Y24kHUUrgt+W1K+q54IdS6Lf+fj3HhEApOlTHOC/f5J6jF/EnNAnghQ+M\nzIpqol8cUA2rwm3tmWnSdABDH+la7KwjcpiwCtm93mDVDy9Zc2HJwrzvnIb0\nne//Vpk/yNBxorubfGwU2/K2nCRZ9ubPpUr3H7PTCjjY7rXGelgJU3V+3fWJ\n5siraFT3V1AD8wvSCvWK5T5kcy6Y5j5f+MwwKbcm6GGq/w7pxaOBimoac+4q\nueInVh6EqVh3/S6Def/DlTV30cPb0JUwf4NZHSJgChT7IuoHzLR7Wv/8rCHn\nEuXFbUpRgxLabtdcGLEaOr/g+I4iLq7Y0gohcUyxP6f7S+xIDxBJfWZ8VaI6\n85QhBoMrAJsnxb9LbfkBQX8dD4MAFJFp9GV2w2Q1s2JMetKQDHWlVd+u3gKi\nvbMU\r\n=aClj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFWPbeJ67gGhKHZTTekxQp4gTlmfBottSsBJ24CF4BYoAiAgrhmhOBAjxZAkOjSiTFVfw/ksE2pO53zNJ/CvwATH1w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.a3ff615f.0_1620081253794_0.6420377082376119"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.948ccfb5.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.948ccfb5.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.474836ad0.0","@material/menu-surface":"=12.0.0-canary.474836ad0.0","@material/mwc-base":"0.22.0-canary.948ccfb5.0","@material/mwc-list":"0.22.0-canary.948ccfb5.0","@material/shape":"=12.0.0-canary.474836ad0.0","@material/theme":"=12.0.0-canary.474836ad0.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.474836ad0.0"},"publishConfig":{"access":"public"},"gitHead":"1dd7576742ede6b9f763d391eaebd31ce501ea16","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.948ccfb5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JnPzGBobmSPrqXANVmGvBIdm9dOH87GqeYZnvf8dltvHHaJkqHEwL9Asoje6Uu1mCeCvgTNYrDLGSopzMUh1Wg==","shasum":"2b5a8d010dc2e7511c89243f24beea44fc4fa1e8","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.948ccfb5.0.tgz","fileCount":23,"unpackedSize":115722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkJEoCRA9TVsSAnZWagAAYsIP/ArcKyxx3lFwoZU6tBDg\nxslCuuPDi9WiVAlMJLjSP7NoLh/uotcAEwh4AllNWSDnim6avElTF2VGGaoM\nHaDbskXJIxC4GUfqcSCiiXfG6RAE3arUxD3Xw1OPhZa2qWYvu1pLAx6BSjjS\n0mOceXBdRIbvc/XmUoj5qi367Vd8E7RuK35OBd46acTrI5zDhegbr6nE+QV/\nCIFjIOUhOv7U5WgxCDLx82ykhPfFIM3uLlLlzmeO/rwzSgdhW+EAWCvb97QJ\nEqq0loqwZZLEwkL+mdFwdaHKd1vPOKkEFcVQfRjq4+z6ePYA0t9UCKOJnB9g\nTCNV8cidaC71j0W4FmvD1ATCuazWSkkV20VIEb14RxSYHxXP4Fptzst+/NNp\nMDsXeRWWerpoOHnipfbF5Bq7sZdLZBOT65M2puavsyo/pj6P0a8doATikl3k\nkqbG4OGisUfIAn+mIGh53/lKr/0oAF3T/tqrO3WOBuF6mo5ONsHnKguLarxD\nN56QAZmTk4HkTTG9Mp+mJvL7tmFJTdJ+Oz+EpV/eMDUqo7a+2b0KFTiTdo0R\n+H52sAVpEKZpMu5fvMYxsntDjZh8IGNXgUaV3AprDhBgbmyZdgZpHsEqvmUW\nLWNo04ZB5StxiKUpygsfQ+yibfiYfmM3pjhb33FwOQ1rpc01tHLvLCIPR+5D\nvfDW\r\n=/7Cr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFoa4qQTAhkK/QTaULPIE5xUlZ3LZbNWL6xp8Nd2xoRTAiBPase/xfxtHxIg/7d1UQGtSA+RSuaZvtOQOSiXl+2hXA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.948ccfb5.0_1620087079755_0.8396722352935015"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.9f8337d7.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.9f8337d7.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.be999eb08.0","@material/menu-surface":"=12.0.0-canary.be999eb08.0","@material/mwc-base":"0.22.0-canary.9f8337d7.0","@material/mwc-list":"0.22.0-canary.9f8337d7.0","@material/shape":"=12.0.0-canary.be999eb08.0","@material/theme":"=12.0.0-canary.be999eb08.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.be999eb08.0"},"publishConfig":{"access":"public"},"gitHead":"c25dd9ae2c04ae380f41705f23786ddbcbe29456","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.9f8337d7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8vnLlb8zeLOSL/sHSgP5R8im6cGJqtBBbIKuSCJfjj7t4N1NI7UJBLeowkaM9oNsVEEGOISuLtUi6NcFX73TcQ==","shasum":"9262a3b0b2c1e459f601f6e89e6eda0233f7814d","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.9f8337d7.0.tgz","fileCount":23,"unpackedSize":115722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZRtCRA9TVsSAnZWagAA5boP/iUqoNMdiu/ZsOUR/nEE\nY3Bw883xK+wCXkgDlyGl52qosX8zr6XgjdUJdvBInhNa/sxvradl6PskI4U3\nGEWAK0B7FPvZ7GkaZX6fsRAk5v83yljkPrNFzrKp70T0GxbsKZhbqSaYn1FQ\nvEiKVJeLzdFZa4WwnSUmuh1YOMu/eM3Hg9dHp8r8bWhk/WyKkLQ3lLcbtRFT\nLtG3zl/5hwepgCaykm2BLLE+F6rlS6pUSG4gwqrdPTnyrRFpKR/61IhPibNN\nTTQOJVibK9j+pYM1ojhyzNag8MlMUQhM4XVqmDoRR8ytnG52ao+B2pdIX8+B\nngARs3ikiML+TaoWUOuaU55gW9yRSkd+nFSE/pK1lb02aXDVavZP1h8beFMH\n+UkYZf/hMUfQ9T63kN+OSA5cBH0haePD8K1HtVYdr/RGQYRrzwAfSopTaSb5\n31PSZvcVXeiAqYncD1AkS9nZQs026TkC1/KBrRt2d36exyr/KfrwoqoLQ5lB\nE1zjLQ5KHvM0r7s25zyX7HlkGsQAzKsvjNcfrLJSKjGiwckSstRDcCcWUYvJ\nPHlxG3cdRnPb6rgr6ciDmeOYPDvZji1vpfpKwogv9UC+800iPaRDBVYUa0BT\nEutXGx/6ICiaZkOQf+BNLxohZNAEuxELQwDziAJNWzEJ9JunCUkf9FWOnwZP\nivbD\r\n=rCnM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFVpMwGrhfbPfp4ljJu3iTn5ZyQh8IqEwiYl8YolgSJ3AiEArPpzNxLYVlSSIEzeaU3OlNkEZfzp9CgX9Vju6So+io8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.9f8337d7.0_1620153453116_0.07614468354435"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.5813480a.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.5813480a.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.055d4f10a.0","@material/menu-surface":"=12.0.0-canary.055d4f10a.0","@material/mwc-base":"0.22.0-canary.5813480a.0","@material/mwc-list":"0.22.0-canary.5813480a.0","@material/shape":"=12.0.0-canary.055d4f10a.0","@material/theme":"=12.0.0-canary.055d4f10a.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.055d4f10a.0"},"publishConfig":{"access":"public"},"gitHead":"293298dc0704d114f85fd245f98ee8f21a3ea348","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.5813480a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1HlMj8LRoD9eNlK5YdCrk6s/agl9CG0jtpu2nIHQoDGhnk2eshSfKZ2/azWa/lBXUDiYvr2TQHiu3QMrXbzOag==","shasum":"e415076667adb20418e4735c461a7ba316d724d9","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.5813480a.0.tgz","fileCount":23,"unpackedSize":115722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkuM7CRA9TVsSAnZWagAAmhgP/R/YW2Vh/9mGNZdjLogh\nbvvQQhX36GjlZyfNFfMTPbG6VHfk23WLmWspEObjW3oHEYCL5/GXUhwYFk/G\nxet5xzWUd0S17KDadjGxHwEkHedUof9SCVVi3GTfKV7k36AxozppxpCOUJpX\nRNk0GYpypPHKg//X7CZDGiT30gwHmKixEzslM2wZbPGC6Cosn7FufGw1PMtO\nQw9v0NNkpqs2S7FExgIWIlv0o7f/FmH7zq6YvxpFaIyQpF+477AyhDxGZ1HP\nzmw89ZSOaKuwKNzsEbFjSoBMm+DUAhpIZKH79BSuEfp9XaCZDH1PceBWPZLV\nEeGY73xYv7/+wlsKYV8Mjr+1hV8DNV4R7N1ruwasHnw+2jjaILFflEmyaimq\nr3RvAKKu2ix5tdZtq8uWxQR7dv3f6GzcG3mbegFhcBwhUAyNHxJcuKLyFJL6\nASu+28Z9V6IIykN2oyresiKNhPfD1iLp2MeDc4/IfV23NlNjV5CyZSSBvLTs\nHELkmDqCaaZpkXRhn0Orh/NPGVty+9Ip4J/1dyeT/ho3MvjJA/YYYu9bJORI\n8Bq3J3Pam1d/XN/bl+uMh9c6/qJrrCij6Jr9d1fEH8MrLwENUxuF3qnQXhqz\nBtACgc2t9U34+p6vr7kBShPHKqb2/9thrux4ANUhDoVRPpUo7SROwmdsjO68\naMef\r\n=87Rs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAOhE2fmtvjafTK6EBNNtX+EskeF2bL2SQqGUAI5DFZHAiBN3WXm7QrvzwTOLcB2OgkCiaLOR3VWzDsP4arooA4hXQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.5813480a.0_1620239162840_0.6761271028631384"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ab7fc1bf.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.ab7fc1bf.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.03f525f9f.0","@material/menu-surface":"=12.0.0-canary.03f525f9f.0","@material/mwc-base":"0.22.0-canary.ab7fc1bf.0","@material/mwc-list":"0.22.0-canary.ab7fc1bf.0","@material/shape":"=12.0.0-canary.03f525f9f.0","@material/theme":"=12.0.0-canary.03f525f9f.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.03f525f9f.0"},"publishConfig":{"access":"public"},"gitHead":"9aaddda989be6b623f728abc86d48adf169d6f69","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.ab7fc1bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-q6ohZ6V3z19PdjCgplhsgAflQH1B95hth3LnPlwXXahRhHsP6gRVBx7hHZmP1cvZf+hw9LOoMdH73kdSoU78Hg==","shasum":"b2744d08b5037fbf23d7518d61a3cdd593ff02c9","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.ab7fc1bf.0.tgz","fileCount":23,"unpackedSize":115722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglC6qCRA9TVsSAnZWagAA274P/imD02xMOop7jdOByt1F\nSA0gDJwutiFD4iFnQTDzwXnPJ9mcvVPFx7oY6ToP3xKV14KJI1uzGcDHeAfl\nrRFlVNCwFRogQP/D9OlxJ/m5XehfCQsEza1XC4dqngIOQp13i0sDDdexVhbh\nLWYhnoeAIaDganHP4GbSnpbS6sa4CQHX/WshqQ//DLxD5KoH0Am10PDv97gm\n2G+wYKhXaPaLAV6l3GOaVj+0sTYOEQbrQzuZYl0xOFJTFqLjdUuqDkznDgoM\nxHVFv/SjjHZrbKY71g/lEFjNHKrHM4+FsCnHQ0AqWwyiKHx8sr/qqIfyEtU2\n2LKBWh0ECDhSFoMHQR9x6wo07LkEQ7/Tb6iq1B9wzoaZip2bb8WwQRZmtyih\niurjB0CfyCqQPASqgW06QRxQPzAVu5KNBfcc2YmK73wLU8hhWvAEMdUtkdVd\nEEykt9Xd+sbyB74UwBz+vm4JWAkG4/puB6TPP8iNBTaSwaTogp9QlPotJwN+\n/8yPYBXAx+mfD7n9UVeaDNHZrrO5ccZ6qmN2AecO2JUGX4f2RoOhzYt8CbMK\ntFGYDE+vtljApeBHr8hs0eHETKsuBpncIvq7cn7j3elAtRCCxb6oKF5nYhv3\nKEZgE0GIACf14ljjGbMALpr7Vp/33qiAoD5U/wLR8TSdw3sCN7IOoTK3Zl1W\nxoFZ\r\n=cRjI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHNm9+WwvelGzT4A2y2ZhVS9XS5aGHxbeKuTZQjasba+AiEAz6GoPNchS5x99rOzKQJR2mbZB507Hf0C7aXIOW6JILs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.ab7fc1bf.0_1620324010036_0.9446677617385615"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.25693d60.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.25693d60.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.869d890d4.0","@material/menu-surface":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.25693d60.0","@material/mwc-list":"0.22.0-canary.25693d60.0","@material/shape":"=12.0.0-canary.869d890d4.0","@material/theme":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"89015755bc4d93aab59cd46274331e3a6c467896","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.25693d60.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-uLafeetdR0gELK7GvEWvQM5sMfzAwVJCl1zM4SBJTZrVCW8l6o41mOWkpPgg0mye8DlGaVeaJe4NUU4aoe5iNQ==","shasum":"be34c4b10b88a7aaa72fa8f4308998c11f72ff17","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.25693d60.0.tgz","fileCount":23,"unpackedSize":115722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbecCRA9TVsSAnZWagAAfJ8P/RvpP4GUixZOgXbHa4SY\n0GsvtbsTkcGCPORQP4YCKhMrEsDafLFr3e8PabF40ug6Lg14jFnEeUxyvlOk\n0lrgrZXio5z18MS70FDCEl306NqxB29TJq/XhVsj6IgBpesoX4XIqnYQ4h4h\nnuYoIzEzb2uNWAhRlRr22VqsJbh2XMHJOCVvK9wCXzkJib1dPuGgNTWMcXnl\nWiJToz9Px3/vpkyBSMvxpSz+m9RVCreQjeCNceAXhlFn+nlMbMJnxdxxuBg7\nThRe1dT4RCdqdaa3vXJMaPnuZqQLPbBMRygl5qGgUghP/NTf7pVNkZLax2Cv\nd9lKQkdRuhiG+eITU3lGy4fG1uWgeKW+2Ojp/b9SFj++Xf5WUXpMl8pJ1wCr\nBoxBEuqJWIQCx5abKmAK6vwmIdanl3syB8LCHOb7+D+5MyM2BG32o9xqGrMB\n2igLsHA9WKJLIaeEfL9H35njaWEIe2b5wd3uRTL/isViX8UOLP1/INuI+QMB\n9WAegsxj8UBtGSVIsxI7Qj3u2Z+suPq1215mLp6dj3t/7a+6WZXzj4VbxuqM\nkC54fH3/wxNQLqKeKA0q58+s6oWcTYlM4OZKHiCuqiFVufkDEwKDUFK9jLcT\nY1k1NXuAqR7hoF07pcAP6lio3Tjm/agijI2beABmXfdZkOgKbIPgSNMj97MP\nREC0\r\n=vY33\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICddc1w2X1VHXhSKnuMd8MPKRkYkjoLCMJ2nD78J0G+yAiAdsjiw9Tdi+xZCgEuZqkDdWAgtx0wgEB2QozuP2khiDQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.25693d60.0_1620424604391_0.48810224593607887"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c497962b.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.c497962b.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.869d890d4.0","@material/menu-surface":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.c497962b.0","@material/mwc-list":"0.22.0-canary.c497962b.0","@material/shape":"=12.0.0-canary.869d890d4.0","@material/theme":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"be15d892a32bdf28e42617b44e38b301b0ea590c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.c497962b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+TeSbuQex8Qc8sQ1OcHQdVeh3sNQX/SNjdiB4uc/dNGUk28z5qL1mT5nulBxxL7N7QDFnprfRf7dwO6wmWhW5g==","shasum":"9fddedc1a2b6aa938938fc44c22df561788e8052","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.c497962b.0.tgz","fileCount":23,"unpackedSize":115722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglb0vCRA9TVsSAnZWagAAuYIP/jsS/BeqcGtlGRRVv+sL\ngK5TRiKVT8IEJ4Hu8rvaXcmaYb174komo//Z5FZJ+355vnIFGwT0oDz8Qb1e\nEIovfsKaPoEkXfzIoUX98N6ZHEUPFR+hP8RGA5TiDMLqdvpTm48RIlFSsnj9\nmMds1ioR3RoAUiRsRcClAhdxoWg1WO+nAyeIzXghHt03S6QuaYq+A8EBIVNG\ntgeL/h0LPMdoY723GxRolP072cULRAqaCEnqMEFOr9H2EXsJ9X/CRHRhFcHv\nSJgNzU2FZo4al3LVCoPjTs7QDz0okPGGg5OK8832UVFYq8q5lbAgZY+NgxcI\nJ+1QNGBHeZ0c4DIbvrfLnJzPxMGtw6qti+uxiKwoa2CB6BwVeHejRKTMDgar\nZMaFN5O5ZsNGfwoQrDRYw1I+FLOz4+oHuSembhxBiSA0M8EP7GyTPOUCi5vb\nv+onD2pPbCjCYkzB8/jzCH1TFuNx04ePpfraWcO7jRcfPtuctpf+aaOOSWbi\n+JZQwVwDilYwi2B1qs0cw68kfvpMkv7nL6qhS9ldbBfGS+/ZtBa7zxRoCk6+\nv/Bqu3xZyY1JVwmZ0frsYDTfhHDdLUI/XXOnIKeKzKES1ae2qvolOU1osCzw\nFa2YMmy/1QF+seB0gQFlP867tZ80vffSqRl/+IYqwm7FUqygyQii5lOsL/78\n70FV\r\n=FrCo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDqC50mclIDmWilECNI9Gg9clBGNdwfyOLPyT3w8UzJUAiEA7r+/rPI5l7R1H0trJ2BSTs7D7EmwUmwrT85R62CM0Fo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.c497962b.0_1620426031242_0.1839948518339054"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e300688e.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.e300688e.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.869d890d4.0","@material/menu-surface":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.e300688e.0","@material/mwc-list":"0.22.0-canary.e300688e.0","@material/shape":"=12.0.0-canary.869d890d4.0","@material/theme":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"94ee5e4aa5987e14fc749785fef3b65b73185c74","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.e300688e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-dthOoKerF7xUUeTyUfwmaGQiHwhMHX+Wi6cbDChQpTWf1dYcOMd8nkg6jF3y+TkSlXDr2TtffkPJwbQPLDRwqQ==","shasum":"e40e35c3b28ad5427d9a5fd9a86dbc5d73344726","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.e300688e.0.tgz","fileCount":23,"unpackedSize":115722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglb46CRA9TVsSAnZWagAAKxgQAKMhzwGf8SRKs+xZhU6x\naD4OrfWO11m1yXC+OSwwYJ0XStw/JQJeFlXfweIy5dCMVWH5PKA3ksFxyxxT\noZbRJBkqddTGcz3P1Jxd6bXnhhMivIt+Txtnrfp/uflBOSytBUG6hJlZdqqF\nZ34IJsGU/Ydf3l0B5U7lvyx0LKhaXCibGzC6HC5pKa7oD329hlGymx/6m4rU\nE2HMRFTHeZ6owPlys0zWXgf6iPTb8X7IBu56LasbpnRr+Af1nhNwv3MJI3NN\nboHN3NsdH5C9vFoKs21xpT8Cb+v+rQNPhOpy+uP8b4mdR+6YZCvDs+W2VHqL\n2HKmWOCBxom/ntuSVWLNO4M9SqcurcENZrXzvPIjWWTkIkGo7SJ49zJijwro\nWJ4KPJccbhxg12HXOawWStg49kS7R0pSeybapqlXJnQS2z1TEz394BYXLTmt\nJ0SMijfJAknALjnLpLiqtJHSBogbsm3vaPgNY3JMVbyb+Xjn7okI/z4wTxEq\nH7a3FktevuDqB6+PeFoniGLUKVN+szzym0GhqcWa5SkqiU0zvCTuWiuJM/hZ\n5IRW4fCbggjjgcAFXtbHKXJDSzen4cDcg6r3rH5+nbCN8YI3xxU7xZlVs3SL\noumxAuR9mtei1iZifbmNtcO+Gy6qJ2tevULVztQL0LwhfRgLgfgHBuKW3zaF\nv4zp\r\n=CN5K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDeW9PQowKPIVaUcdvzBRCsagic3jzoNtwEJ19pb+L/bAiAR+/PIJYw9B0U0wnJiOgxwm6nXPRYgUpPrhrrzGOeXDg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.e300688e.0_1620426297794_0.584596488128468"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d70287f2.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.d70287f2.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.869d890d4.0","@material/menu-surface":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.d70287f2.0","@material/mwc-list":"0.22.0-canary.d70287f2.0","@material/shape":"=12.0.0-canary.869d890d4.0","@material/theme":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"17a229885fc92f311534b89a9df6549e9b78c204","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.d70287f2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-keL7EPch43Kz1qNbW/eTaiy5xQ8bv8GVKPsjQFWyscisKBSlGBBsoDy9zl8LFfLQf0/fQl7pqq5aoS+jir7qSA==","shasum":"f20bc17e495e5e28ab9f570f6ed8b8d297ec7bed","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.d70287f2.0.tgz","fileCount":23,"unpackedSize":115524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmYm1CRA9TVsSAnZWagAAu7gP/R3Tb/NU41itEBpeHdP5\n1VZB6z/cP2SlgF/qxMiVPDYIwURRSfS0N5E0dEyCqEECrlwLCJQQ9CoAStXi\n0ydPnkPeHxso00a3YF2K5nHuKP+q2n9HvP4Ps7vlEYLV7NeDKoivQ3+8pze8\nJnBuvdO9cDMmjPWTb2tZnAtJdkCMRPaGXye7uKobAAgGATmdiUu8lUtD5BuN\nNBOiHBzAETiSz4NKJS6wGHI48b71eSfgwYM6f20nxPQiQ+p54WaOs1/MNWh4\n3DHdBD8RtEu7typSFGN9RcV53K69Ngg19eS806NN3bLK+d4dFtw/Ev5PxKnI\nqlgBPQTLF1U2c3DbC1N61ubFbht3nlsuQs7G8HZLy9N1lNSmdkeU5zSqeXsp\n5P0a3YKllEJuIIHP7F40fFvPDTdp+S/xK/Pc1xEMXjjQjsF2KCRbt2bvPc1y\nV0BsbBaQXmvRDgBvKaZ77I5qQCkQ8IoQiyZTCFuL76PRl2PMtK80qazrm03c\ni5loNFIm7wvVuHTqyp7Ix+JQFs82PMhmk3CsZS2VvALRq/E9z9B8EFu+6A6x\n0K0MnrJELvxN8NhcboM52+q6N2J475HtHUQ4b6unxDL/6AkUOvDXu3lU6GVF\nSgQj4D+EuDoV4iCqVxJP0cVUu2vtf/Gpa8rHgC12Bk6BKYxz0bpWgmoP7CuZ\n967+\r\n=2njk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmOKiclA1hoeJVpRG0tEClLFDsCy/KC1lurEUJMrfp7wIhANZXzpV61hNl+vTgwp5Fvpjw7qA/RC9eRXi8YfO7Y3+C"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.d70287f2.0_1620674997067_0.36406635382785146"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.02e841b2.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.02e841b2.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.869d890d4.0","@material/menu-surface":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.02e841b2.0","@material/mwc-list":"0.22.0-canary.02e841b2.0","@material/shape":"=12.0.0-canary.869d890d4.0","@material/theme":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"10f49288fa74318f178daebc0299b7da22137eae","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.02e841b2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-SC/SpivzdaNKJNPUrYqnOMPOMET+QaR1qx3ZL9EpiaFpqUTq4v2iobX4MJ764qkb8glkRFcqy29hHxilf2FsOA==","shasum":"f2cfe14c99951a7c7c2ab801e344cc3f43e28566","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.02e841b2.0.tgz","fileCount":23,"unpackedSize":115524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmZkBCRA9TVsSAnZWagAA3OcQAJY20T/uhehAa/G4GIB9\nancdx+SE5tgTZFfBkC86agwbs0OLTp/zFC/ZgQ5JSFJX+Ic/dsNqAcikysrl\nqnn55u94Qw5T4Ka/RdxPU6Gdn2Rb2JwBqoiwUS7lVFzIgee27LKoUCX3/xQ+\nhZdyasEL/L22ZP9iEfesVFDWmQw4c55q4JdtM1LYau0AnjnyWaVn2msGp06S\nEfwJAkTVGUScaA7J4tax7bm57/PUyVBu4HF+fmEuGiClV3ReiO/IMVlH/fqc\naPAFYJLmPFg6PYCjy3ByCbqWcAYd6x4sWpCGVWBGUTxJuxxV420MIkth8amL\nfWrfljFLT8zDqVo8ngkPHTA37z7yZ9VPbKTbStHE6thIinAtYtTZgQ9el94S\ndXtUTFtUEKZ0YdqO8IBSOj8N5zATW20YOjkaRqXShBt3KHOmeHqidIiysV+U\nr53ECo4kYqUOSF+Txtw8nX0w89R5nHKNJQjlMS8BestuP6scbtYcuhPpznuI\n5K0ktYYYz2jmFrbM0eSacQVcv2lQyYuoAv23MppCONy0BuMh9p5Wu4O5ugaY\nE2EVdxCkuWI7MB55LiiN+HYeG2ztRerZxZyaQNMvoyQJ1RvIPcByyc9Z6S8M\nH/yOmLHsVzndyItG4blBUQUrc+GzHzY3BKQVULzTpOeNQoRCOQNxObp0Ae7v\nL9AO\r\n=YaXf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBdPvaXgUgnAYgVm+EmLnrg97X3u/jCnH47Eg+kLi0MKAiEAwO30j+kWFEzE6C3FmVzVzYMTN/MrmTYBhDLcHDEGlvE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.02e841b2.0_1620678913352_0.2541550552276124"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.badda2f0.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.badda2f0.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.ec22e1da9.0","@material/menu-surface":"=12.0.0-canary.ec22e1da9.0","@material/mwc-base":"0.22.0-canary.badda2f0.0","@material/mwc-list":"0.22.0-canary.badda2f0.0","@material/shape":"=12.0.0-canary.ec22e1da9.0","@material/theme":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"961b6b76093a7229e8b8672e9dba3c2f9af0e61b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.badda2f0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mPUqo4+CqB8eus/65mvaazFyrop3/hz+TYHY5WwEpj9JpwtvZh/NgpiHN+TJ+8tQCBIKP0p84rOn6DttDTFm3A==","shasum":"7544cd84c75f4fe4c04100fdf3b0db57e2de3d75","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.badda2f0.0.tgz","fileCount":23,"unpackedSize":115524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdFJCRA9TVsSAnZWagAAr/QP/0pPyXyN0Vhn5Nd5+86g\n3DFif8bIlrSxu3xa10vvmXvZXtL0jbXw3D4Zepu+IwFgS68QFPesxj33s9Te\nf4M9CoukpoKJodLFlh8UabKSaEr8ArR3+bzMuA6hLVeXlOJX3XTo1ofbdAUM\nVqTB2xKEwCK+L5x2pVsTH5nonb27A47Lybh9swXiT0u34Kww+62W7j/YXg8m\nTx+ZsKWCtkeM3s8UCqXfdr4lgJOzncy/FqdYF8M6bDCGWSB1jP7tglnWP1cr\n0zh9l9fHvZuTJZuHwU7FIZH/21ggMUdrWMcIN3FOV+OYiw272jnh0cAJHqz1\nAGnSe7LcAKhYxQy/LvFnLhUBb/MwEGYatsBUB7ch1gNfT06ANaXGfbh8wlHl\nupwJCHO9ns1KDfwV/P1bqszUH+7H4yHmOWvk2B2jJ2eQnGP2bAbjUEzrQgQR\nGt06TYZfnc+/nbjTdq7cMdcUrMxB65vvTNk8iAYQimqcMZQ24nMQ/ThwEJTv\nfwDfT08OMtKCxPBqWXLdz3II3JsTLFQazWR3V/kY0TEjD2D6+Wg4S23mkwDP\nYzBBg5aeEeMl7rOmIZuHn5oU3ODgWMewCHGE60libAtsY96RTGRfrtCPU/fl\ntJlE9a2XXjhsy3yGm/NIgzjzUmoX2mj0zuxZYzk86m4J5XiEzSN1y7291Rr3\nWmwh\r\n=eqhD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHguaEilc4vPi/AFwrBOaymt5sXVG1tYHLWJhtQwV35/AiBag6EA+bWyjo14qiF9mZxQwRv+90PHv8LT9FiI3s2GAw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.badda2f0.0_1620693320631_0.6439400247785283"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.004aca62.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.004aca62.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.ec22e1da9.0","@material/menu-surface":"=12.0.0-canary.ec22e1da9.0","@material/mwc-base":"0.22.0-canary.004aca62.0","@material/mwc-list":"0.22.0-canary.004aca62.0","@material/shape":"=12.0.0-canary.ec22e1da9.0","@material/theme":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"3c20c30c670567ff3483811cc2d47a795de96151","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.004aca62.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-E280U7Hf0wzOm+Y6DZ4qCTUhSHdDFxJG7zgOrPmND3l/mQrnfpgHT8hHP7ytNbUN07Hw/NXuhwUCUZualc3gIQ==","shasum":"81fd8ba372b9d02ccdca309976e5dc736ab98ff2","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.004aca62.0.tgz","fileCount":23,"unpackedSize":115524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmsfECRA9TVsSAnZWagAArngP/1NA3N1gSS8qLlWT2kdF\nNv0KU0e0TPsuuOE00ZIQFXU3qWIEmsNnBdQd07f5kzM1KNOEWuDsCFZbdmms\nPAoX4BXqXe+HeA1a0w6QNVoT4z7KQQsZ2SNstEZhLVLUcsn4H/8yLoBIHcqB\npvElBInJMaoxHv7Pmrq7A5Gy9Ccv2ybRRDLMIzqu0QWj26TeJqHyVv3cHwwH\njibi/800trQ9pFfASo0E0oiHtVvhLhqf2hiYYPjWCNHMfYxvRXBbIbJjcdy6\nImbd070tptpFeUJOnkwpRF92EhOrQa7xK9eS3e/N8Npywz1opMa6b+bZOV4D\nam0trmtxJnevFH0Lr4MSzJ8ArDRzBw6ZtvnEUwa2T+1hW1Z+zcn6vMYBmtH1\n8fQ4klxlttef4Ed0p9wYMw7HQUy+cdVb7Zh4M9viuWts9Z5+K00Ow+iJM9rv\nWjLlaUKsahe8hHMEcHb1HIXF1dUB9s6GAwciY74DDdXdsIMyNTuQYTmihIAg\nA7o/c2gg/rNp3/U7iemrYd/0KslgkqURWfWTzinK+JUNsau0rl0E8IgXK1or\ng9V45sENkmFoJTYrz6gucH9/MJlDr9aTkbAjWpCsrs2X3TVBwDBUYZhGVQf/\nWVaa2vxss4RtpqtrsU+ORf7x5g4qW6dJyojNUnRfS7STArZziMD9bdC9RHU2\nSlw4\r\n=nolj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOP0rXQE5o2KFwRxiy78hHnsnUWBRGg+YBENB2a5rwDgIhAJVbBzMBlw0NVCGQb68HuTKhjmqNE/0WB8SjcdKbVQPS"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.004aca62.0_1620756419670_0.04627770420967381"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4af17446.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.4af17446.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.ec22e1da9.0","@material/menu-surface":"=12.0.0-canary.ec22e1da9.0","@material/mwc-base":"0.22.0-canary.4af17446.0","@material/mwc-list":"0.22.0-canary.4af17446.0","@material/shape":"=12.0.0-canary.ec22e1da9.0","@material/theme":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.4af17446.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+q3ia0KPCRxSj+OXE1QzK9+h7a1rgwdOXzFYnssMLkZXPaCgxOsXCIdGwv/V9xs2VQenBDTv5amL3wO120i1Og==","shasum":"6b6b8368357c7991a66c43ee025c2e8c31b27551","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.4af17446.0.tgz","fileCount":23,"unpackedSize":115524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtEWCRA9TVsSAnZWagAA4LMP/jnElv8Yo1VRvRO2jcwH\nkJa5GwLdXDL8uDEueVsw9IctEldFbmOd3H+sPXPFQkzPcD6uoQcpWrCV0y3d\no8VI29/bIG2w43MHZTeDt6aQ9YoS8TjgNhi6zX0kpfjUOFFAuPh6J7GVa+sq\n5PO/Uj0+oueqiMvVFlf5/6/AVdwiVgo6NvaINTmMeiS39MKkHDxYDkOw7heU\nItS2n6TZvH5fgQhbKgON12kolA1C6FPndDh3rhRGw6EAG+Gi8igLvSGGmz6A\nROEfltUedVFQIe4ApOUy93PV6d/8Mn/ggoombCENXcorrGKOK1RKMWcGu0rt\nnjweFvnJ7ncfOqqorl8Iux7tt6wNRJYbaeo1nyIwT6ud/4FxAEwQXGsalHti\n+T4JtQC1Dkx5kW+f6Aix/4ej4hRGl2idjqSmKACbYx72Mp+4NaGZSOHdoGHG\nah0x2I9fG/C81RqkH76FUy4TcIMDeY2eND3d4IdEJYK2D4a7XJTjHsmz+Ur7\nao4733FUoWE7L3BTqDJCf5w8a8P9ayEd7zPb/bwTm//VCpdOLXfdejsySiif\nvXuE5Sj8I3x+HhEts39OxhcQTFwnqgGQZ9vbq5Ff5ZhvJBLNbXtvzLegfQO1\nYmn8H3GOJszW4Z76qb6QCNS3BVA95F6Rq9z4ZlaZoEnFK0KOxeVSRJ0vmoxv\nl0OA\r\n=Ohpf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0oOwntWCujRhIMR3EzPgTCG4xzjBOFRr6NQTZL2MckQIgSpxOxiVO3SBTVM4scSbLzgTZF8I3R5Y/4+A53p5Rdlg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.4af17446.0_1620758805946_0.9839823571127395"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b94d7187.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.b94d7187.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.ec22e1da9.0","@material/menu-surface":"=12.0.0-canary.ec22e1da9.0","@material/mwc-base":"0.22.0-canary.b94d7187.0","@material/mwc-list":"0.22.0-canary.b94d7187.0","@material/shape":"=12.0.0-canary.ec22e1da9.0","@material/theme":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"0b32af6d751df8cf58980e7badd64494f9396b00","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.b94d7187.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VxYf6180TCGklrUxRdFEIMChb5BtKdPAIbAdioikMvLtPwfnGenfKs3djggLia+0NtP+nsJUOxnNPM33FunE1w==","shasum":"70123eb52b90dbb28f6ea368aa10869ec0cd384c","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.b94d7187.0.tgz","fileCount":23,"unpackedSize":115524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtJiCRA9TVsSAnZWagAABecP/AiFFC4VLXGXGg/GSlxK\n/SVhATvT4ZUOsrQe1nxAwOrcT3uJwm6edRJGfw4RcqogJGpQ4oAnOIaMOmez\nYCmO+PI6PqecMBuuGbRpGS0Wp72A6D4qRvfxvSpVbrsL7y0V5R84lnuyaCk3\nehHi/CZrbrmn0B0PZYBh5zjNW14EtJK7+TPiKxLkVJFRBKC3MYd8w1nd8KVs\n2ZIW1oIVaeYCO/3RXKjIM6Xd7jw81Wui92gVJTDYiPQ+qU6qgqgvIm3eK/o9\npDVGnLqYIReBBeyiZ1Sn2b0wTWbgsPWjx/Zrmaw+IDGUC18ojJbkoy6HpAP6\nctKhGtwGpFyKx0gTHr5Zy8iOwPldZZo2k1mKyEgXYWv2E9+uLZzYGS2WHOM2\nzArKt3QqoonerANAAv4IdwQvNjVqap//skBcsUsSh8MhlX83cCGZTGj2Djte\nb2fDgk+bQIHiM8Ku4DR/tPYWBZEAu10gmCy7bkWRCaHf7AI/SaBf2I6FLjNy\nOXWo9TBIXwgx3PJJtVYAd7GRqStQZEm68KrgNCkp8bRvVOMTC8NbzwyPG2Uq\nOdr05qin8nHXbj/ih302Wxu7qr4cukC3vNgTrQ7x2BqJ9dIxXwRumJtoFQgI\n7uXbn+kCBXluBNZtUAkBDwfX5Ibo/dU6u+CnxHpL3cUHnq+uL48MjzmjIb27\nnPkp\r\n=acKj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGQhvVrVwi9Nr1nufmdolzON8yuXItafLl8lUnxrGeiEAiAqFEgrWccbafL61T3Hn/Z+PFIcaLJw1vJfOVnppW4KTw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.b94d7187.0_1620759137971_0.6266041816582655"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4021b2f9.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.4021b2f9.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.a23ecb682.0","@material/menu-surface":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.4021b2f9.0","@material/mwc-list":"0.22.0-canary.4021b2f9.0","@material/shape":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"535a4442352f807e1f7e655d0a135c6d12906ed7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.4021b2f9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4B7Icmbis4uvoKIuERZ4pu7QLWi5iyiE1znM80ck/ytyrLPCb/hRgNFAAhiRGqYwqnkbsL6Funhg+Ew6el/bBA==","shasum":"a278541ffe0966aa14f05716218532e3184d4e19","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.4021b2f9.0.tgz","fileCount":23,"unpackedSize":115524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnFAsCRA9TVsSAnZWagAATc4P/1+4Ubo47OnEHLp78O0y\nZXVm84Vo5KPQIaf9ebXyvdXBvVsiy3qQqQeNfeF6CIu/ESTT9WAvorZbP05b\n2MWdELEovnem1PYGUEGD+3TrcG3y1Ic3M8HlfCVpmv8p5cplOH6f0Va1+S42\ncXVXZ9n8CvlNzNDhst1GOSkXsxC1/lcrPQMzH0zA6JJ5ZNxmW0h8tWcO/Yxd\nTQ98VeFe9PGpH4+RYAw6aRTPIADKUxYOPCKCLD3s5V9HqHqJtbB5sbXio3Wl\no2JiLCP2LzxqjzV37BZ6FR33+N7yrustTkB6/xKpdNCaBAyhy/9aGwh2k5v3\nVcchTStdA/BHbU7m3/cvfdmapyQfrbb/OnyTvOTqTzTCwELmX9Rp3clbElQM\n21lZwbBaAdC3WQjn3DVYifP92bHXOyMaVyGyN0Ipt0aOcEVhk8Hwop/wE5tJ\nDpi6HR0NZGnv51bsclibayrT0Bc1oGkx2pwy/wvSZYRuiemn63kTHtvojkMP\n1sd6FYghbLzkjMUeHPn3GtDqnKnSmcI6ZE0ygtFBuEdRysvoVc6fk5GiQ/3l\n0P0uHk13X3wCvzz6kHYE6yAcIsGqBXRsQlXgGqcrofpG8RDvsLoDT/jyXefc\nBQZUk+ZyAO+LtYvnqn8JAlZzkyHbUk4DenarhijUWIErKtcwx8t0xNw1LLUm\nIo3D\r\n=hib+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFJQB8RsWMCJaco0LUXEKjOf5nokxMJGlfhqNLFGpSz0AiEAkVmw3h+qKPXvgetkp+dHufuS5HQJDJTUJfgMeWb9fJk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.4021b2f9.0_1620856875707_0.558111394507367"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6a5956a3.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.6a5956a3.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.a23ecb682.0","@material/menu-surface":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.6a5956a3.0","@material/mwc-list":"0.22.0-canary.6a5956a3.0","@material/shape":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"1164d783391049aa2ff9412e519af87df40b5406","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.6a5956a3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-v852YF922UQDvvObyMivZGkVQYKKAhn6TWOCk53Kceo1nR24j2e/Eb7m8ONnMA3WikauWBDB0B+7L8TcLat8yA==","shasum":"ed85dd344f693d42cac6529512c4da3dc7bb22d1","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.6a5956a3.0.tgz","fileCount":23,"unpackedSize":115524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnFQYCRA9TVsSAnZWagAA1gEP+QGaqJaTRGddPDWcW8XR\nurlBc4x4ggP3OxtaiQ84/hzFvuNWnHqh+eEvIEY3Cl67eReg+LV0tqdykCJ+\nT/cBGTOO8Gia6g4Jgk7egDG9ytZ9SzPfnbFxAVByNWmFDVTtkuUGhrq521nX\nXy45ehOS+PqD6ZcUQcj21deH0Fxa9D1iPUYKbAKc1U89l3PvBB5dn762RjGY\nIzIUhHtgkE8JeVi1RAXNRQtx1qydVNvIaG0nDkeAWERoMPipIr2KJS8d+AwB\ngvv/BdXO09lBt2SK98M+iEOWQ5PcCiU/W9m+1HMlsp92AbOuJvd34fGluNef\nREcXXQs7BE0k9H//mC9DAON1s9gFrF3bzgLDzpBLoU7hza5MJgemDR4UjZBk\nSDrchfRmwmaJRbX2M1bBKw1RFNeOdMjisbonvX74kcGrbBpH3gt79WwdyD3t\nQn+NxrSX8vxw+KqoupD4CnP9YaZ4mObgBOj2T6ar8p9FcxRsQEfWtyRxmwZ+\nkMfZ/5SGc8CZNXcA2+onaozJubWXr6DxzC29T8zaRgncaMPi8erTBp77Srru\noskAuYcwup4xfVDy9JbKAWtN8il4U25cu+snwWOP9rgFP9ZGApXKqF0iSi5M\nyNVVZinZ0zDFSRbMUoH+rr9pr2XorEODck2UG9GwhhilDah26XeRPj+mwOw8\nDT0l\r\n=xsxG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEsIcObUJ/uOECmpRxlwo/qZrqHvs0mmE3aHmocpqF7gAiEAnD/+m/xx9RGVbq7iu9EXIuDrR2MAU2RCXB/0FO7H1hw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.6a5956a3.0_1620857880068_0.8841461731942926"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b6e8a74b.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.b6e8a74b.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.a23ecb682.0","@material/menu-surface":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.b6e8a74b.0","@material/mwc-list":"0.22.0-canary.b6e8a74b.0","@material/shape":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"09c41b7e9637c49faa75e5ac84cc73c8bb5f80df","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.b6e8a74b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-P3kn3/9kJres63CuFrl8bz3rcmGlgeCQBY7wwbceeydy0OwoihvfCDINiYgL/0nBKXPbonwfZdIJcMBUbY6PQA==","shasum":"e92b7fad22f4914578fd3f0cd337de0f2a816c67","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.b6e8a74b.0.tgz","fileCount":23,"unpackedSize":115524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnF7gCRA9TVsSAnZWagAAcfYQAIynusw0EjayTsMUpFZK\n+qaUZqiiMdbkqGD31wJr4oy/607d73RgrcXx7BhCNiPmA71B9aAjdxn69uTF\nhqgtQKTWV+pgh1uyOVdSIZslUjyZav2p294Ls8KiSU6HINWP+kDa3yNPlHgA\njIJXSiS4uUdcLzez50aI7JFk7052Peyztx+U/pF8W+6j30Y0F0KNzIcLadbi\nNVyCbD8m7j0wla7z2bqfKUECUClmi6h26EUshAsixN1JtVQgO+YdMlurWbi+\ne8Zwl04Gmxe7Xfd+2p3UEAD1uVy53JSItGaARBhM01Hx2nDA+13dsUI+fDpd\nURo0nTH+oiANbGY3sVVjbKw9tR4cOr8dRk2yTDhBMqkqOiZhHHWB8KgnN+Np\n2gaL5a05fJdHntHnq8C+afshygybzugeIWiWJVnUmPgaRwOmL7WRXTd2YP9r\nQmGIwa3snEIjcXDRZiki0GSaU76UzaBGsfpwAvGF+J+dRdC+Svmxu0AwuEaP\nP/j1uSa5thu6V0Ma0HMm2Ub5fJDC/Bq4D/zCxbkJ3+dInrZcjkmJMccfF4yp\n1nhenQwcxtRz7/g92oM0DCTEqPTM8Gl/hMEN76m28GJsVprBwC5kZRX6WRR/\nfLYIikOlqk5B7ZG6sVEAC7UcQj9IpuyBp70Eq2JGPlNDrGnI5z/u0rKB1Gv0\nd8GH\r\n=m1dp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlWg6487GC0FLYXJksrRarO5BUKAqItPy0syGf2khUdQIhAPXG0lSf9E8y7LHgmedP3f2eFhm4DapR4byDSU8eTr72"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.b6e8a74b.0_1620860640034_0.41732385789421644"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c94e1030.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.c94e1030.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.a23ecb682.0","@material/menu-surface":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.c94e1030.0","@material/mwc-list":"0.22.0-canary.c94e1030.0","@material/shape":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"01e4fa09129b5963d59405355762cbd1962f1198","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.c94e1030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jOVj+VP45BmbmDW+CgOlCGBt8JWyn8G5sdB7NolhGXes6oTa+Dkcr+zgvec0hFb33ylu4oURsKKzA2k165r8mQ==","shasum":"78939ab04e9199954357dbd8d3e3b6d0c5065e64","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.c94e1030.0.tgz","fileCount":23,"unpackedSize":115524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGA+CRA9TVsSAnZWagAA9Q0P/1s/ubcjyT59rrdINPLl\nShEsGTFzrm75wNXKG+AfaPxOQhXUo0/5pWi9kca/+yCGha9uLc5TdF4SNUmg\nF7ROtp5feW/XNu70aPdMxtZ/zTLfi1Go5kmnN3jyZRmMpYqLFMI6EvP00pu0\nr9WELNqQovfGsZho6DrEZqRIiXXGP2o5fl0X/PAxT4WBJ1nZ7o46moIzwGBh\nGmshibvjXCz3kKWM9VfviNj7MN8OX1wBlQgBrbE5YJLBvKSRbRl1nPZXQir1\n0WuJuwAUd+DnTVnl9uRRlcmNDXs10L8VBpP96ICl66d+mWJhpxkRpAYhwxBs\nNGBVU9oxE2Dasm2GWjopOPj2x/K3aKX8TthSDw1KuCis3J8g/2fLRSHGkmfw\n7CvSCCypluO5yjxl5YeOQruOoJcnVtYyBHfKyBqqwphXx3uqketF3QmehWSA\nNAA2kW6x2Fm6Hg/j9/ZOczz5rGzXhKNA93tbV0MJHhV//wlhMRVPCMJvUCed\nidc3hu7z0G4Nvq7Qvc6ZWKXhVu3Napnk+d8CKW048Aa6SE6rwNCTS9NQ4MEP\nz+Kitrh2ngYeGuElBPGWqaBjcoa/HfMH1U8qpm5vlu1vWD5eoxyNV0O9P1Tx\nCwBULy027qqDDnm+YvWiUxw4EKtyK5ECveMXvR+G774VF/YiGIC1SiQfqSqB\nE+1Z\r\n=4Wwc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAmxFe+iLy2h+uD7SJJwULKN4eMBKBr7ypNmewHpZ26KAiEAnkFazm/ftzjdMDlUhW37rWo3MpVQNStgBxRW27YVJwU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.c94e1030.0_1620860989723_0.608183315419359"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.40a34e35.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.40a34e35.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.a23ecb682.0","@material/menu-surface":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.40a34e35.0","@material/mwc-list":"0.22.0-canary.40a34e35.0","@material/shape":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"6cf3913b43a92723ad4d1144b964df3a8667ed7e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.40a34e35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MRCSwddPTml1XFiE6loWM7lX+glluNsllVoRoqst6cXrqtBCgUgmqElgxlUquCbZaC4MktG2Aa7ORzTclNEHKQ==","shasum":"a8f07fdfa33da00905b6b71aaebbc50f4d83c766","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.40a34e35.0.tgz","fileCount":23,"unpackedSize":115524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGvKCRA9TVsSAnZWagAAVP0P/RtMIu2OJHLYpzlYfMmL\n935H8L1y1w4A4jAaNRFXqfy2I1f2ZJjLqwicnkfuKMkGHATcW7NJ1bYA6bnl\n723J0aIhMEbYt7n4AKZaHu0rcsXnizHW4rvK5WEaC2gLnKcRiGTfFF20a05c\na+JZycj2Nzmz6j9f0EfBRUWntyth3ntT5WqOInsgQltE5ILQiVk9or0tqZ05\nNv0oaG0S8EyPTBVfPUv9NhxslhVjloAJdIZySufO/bd5ULyibyLCqd+nYRWL\n9xiQX7K5yYD31Ly95dW4vtHSFiSSjYgacbNo7DuZcLowRYOzbPhH92ug/S9K\nnL32Y6Mta+JGYISyQbAhSnHGGdWrr0q+zB1WIE+fIQVVa1Aux9zE3xDG29C7\n6rxgXDNlFeBPevh2sG4Gr/mLVCj49W8kJjwY9LH1NhSqYSWtWejbpkIVp1/s\n7Grt9J7ya6M0MhUPX3qCxogGayDe4LttsKVrOwxRUgehU4i1uwrzfMUfdPIY\ndrGH4utEwxssbRJHH0jv8lZQsg1zvUhGXQIMYB0jOdcoxPVDFyrJArVASq77\nYrcuUk4FyOyDeIjPebsqFausbANiqcprOmwT1bUWbqVgAQyMlpmVypwunTst\n32cT+N2vrY7bXlQw2fzd0tf6SZSMPEYB69LumM6JNIoaejz7AawSxBwxw2+l\n+xz2\r\n=/FR0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAWY/F9Z47R/vdwPUGCfOtzADJMJ1Gno8I9glJ4myBYgAiBWQWA7N6S2eY98r0rw7UK2O2KiYk/omgB7QKCnTxZMPg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.40a34e35.0_1620863945281_0.8371300375778983"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1be14d2c.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.1be14d2c.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.a23ecb682.0","@material/menu-surface":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.1be14d2c.0","@material/mwc-list":"0.22.0-canary.1be14d2c.0","@material/shape":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"2fcf49467ff2fdbb2ab4a987563f556e6ff316d6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.1be14d2c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-y1CdvJ7SX9XB6nR1PHv8kCH00jw2HWCoCS89mgXVI2IQQeK8Hylx96ricSU1El4ntGHiYJ6leSIfaqz0SP3Y+g==","shasum":"e1dc15f08dad2a62668e3ef00e502ffa25382dee","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.1be14d2c.0.tgz","fileCount":23,"unpackedSize":115524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnWbnCRA9TVsSAnZWagAAwk0P/0eWFbM4gn4VQhg86wKC\nnXCFA9HuDMF6uFBuew8MU/Ynwh/EHcth8N/k4unN2KZq7QsbjV/Lacrp0uR+\nqCCkJoAeMpaoxRvRI62JuogXOOOPoCt5/+vTqME5yOe3VH79DqxMgwmoj46E\nhpx3JhC/7w2f2w9AjfMr4n8eDX8PgPQEF0Uhva1KiPLTcuiUS4QjkjQPqtes\nCNSJig2+WISNWYu3h2UjzA/4sOvL1uGY4CE/Pg1aUmN0KIDFmvSFx4NVARok\nk67u8vMf2hmBHLNHp99yzv9ko58VPq9uZI9rLM3rIp8SuanpuAbz2aMlPKpu\nshsmBRSb6kTqaC/PJzF3lU9PduYdrptvwWzpxFDrI9k7QXCJvMfHBbA9PP4F\nKILv4rR/o++LTFMtflG7CSjxHcSZ331683IxwXo96udkYnV3YjIlCENc1mno\nGJCJVxqfMpwQcGXAiv4RT43Z9E3E7NKSWdcCV3RM4BFKxR0VBweFrj7mryCt\nVaV3IOTWq1dNS7pD+WtgmBHsKikYF/3kis4J1WgvF69ZPhD0ddEnDDWeNP9b\n0Y8ojZxuAdyAetbuzWkjhsgejQ1Jwvm4ITNsP+aWvM9J3xqP6lJOHZoUWQGY\nrd7g3lNiERZqpf7Uu3/ZhU9RmWFeXkZUgiOvmF7Iu3gz+Wg7nZZrQNnH5nrd\nxPAW\r\n=37uW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFcqBqvYRYaQDuWWRW6lboMChVnCzcz77MaQXqUrzviIAiBp6XK7VDCD3LdzcVIGU3hg1vZ2dKDeQOCLPPyyZAAX2A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.1be14d2c.0_1620928230593_0.8072807922812972"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.87dbd64f.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.87dbd64f.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.1a8d06483.0","@material/menu-surface":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.87dbd64f.0","@material/mwc-list":"0.22.0-canary.87dbd64f.0","@material/shape":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.1a8d06483.0"},"publishConfig":{"access":"public"},"gitHead":"5b6b91a042dd241b949278a5e56cf671221e6a5a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.87dbd64f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-z+bJaMX9UdMp73qVpWVBce2NMJ2vevCdotd8U/4RoD+4it5btlLTTO65jQeXaVPLIIWCGHIVNu3a6gnMtnF3dA==","shasum":"904b06797239b0628cffd513295ec8f4949187b5","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.87dbd64f.0.tgz","fileCount":23,"unpackedSize":115524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnuScCRA9TVsSAnZWagAAqVMP/2gsrmZOwviPnZgrHX/p\not+jq3PLxUYhmJyxPEa5TkK5Ln8GbBm2//EZu4xLO5PjNyqwV8pz1Ly2LCN7\nf/CM4t8DEvPgKMrg9I7hC9rjUjNFx/Z+eavULyEuvSvMHN2SVS11ZZBQAD3U\nPR3vjPbZU1EwH96V+H97isQfViN9hfcUD/n7pKzFBAbyQqJsyrNJHpsz6Dnt\n9HKokI2+3xZIW1bSDMqvab+YxrwXn9BI0f07FtncbNgSDNctTG6yP6vn0o90\nA0MYWjBmi7ouRyTnG9SdiHWWHd/9HrBrP5A2tHT+rjWiEjdOzUwf1s22U1mk\nQ3DIs+DkDuu1qLHYM/BUOSg3T3/sr2wT9RIO0HWrYXu1mY4L6YNUitbH/jpU\nYiEo198CJpnQrQX7R7vqUytixX2eDRdI5EFxpiU1guEfzTusr0uKzhO4OQXc\nKvsNB4V3ScLZi9vZRHjELOGdPtbYeK/rl9QWOnrEtPydjFpDD6jp58AAjk1B\nCY2CNBmYD/yaF8uYy9z8TdrY69T5agwF4yS2HMEcOKp+NrL/iTNmP7FjiuWz\nCES0D/gylONmKJZiXCcN4eK1wDAl94pk/LAvP0519IoY4zYVGprdBsh3ZQll\nFGK18OIc+PPOy7qsEv1EfgVIgP/3cEy3xMpABcNyeudFV2+c5kPpu0WcchBE\n7Rkk\r\n=zt0s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE/J5dJqOqcmrByg5ht2F0DfbEa8sVYxcAxw+4rqOF+eAiAehS74b0xTmqIWtrJ6d/Gz9rLVkTQnQ21Ap6TPTsqKOQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.87dbd64f.0_1621025948029_0.9437876292650977"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c452e4da.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.c452e4da.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.1a8d06483.0","@material/menu-surface":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.c452e4da.0","@material/mwc-list":"0.22.0-canary.c452e4da.0","@material/shape":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.1a8d06483.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"30c4701f29e4afdbe58f6529e947eda655b1b1ea","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.c452e4da.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-TexqTC3Pzczjt8TWT2cNk87Lc6l67npzitVKVBX2mJAZ8XcN7asP0MGqQhG3Rjr4DqkszIYZM9MBsqMGJ8xW8A==","shasum":"c38ffad2a0b4f915ddbab7116e7f495f40368480","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.c452e4da.0.tgz","fileCount":29,"unpackedSize":120269,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgov0aCRA9TVsSAnZWagAAbfgP/R96H8Pto0viTh3fWsEW\nxKrQ7MnkWAgxXTmyLB1QUOB5S67LOCWu1p4NvEMJ7Ox/nyCvBE9B2UWXb2mO\nuaOU8h0HyDJlpZBa9vxEPIyjwTB3u+cejlzeMjE6zOu/F9SOdmYyykl061W9\nESecGWanxyQzEdxzjp4bWqUhdeVzS1xs4hOJXVZ6IestlcFYfclay79/UvzL\nLE0e268dyrTDzzy4Hn4SA9KXz9O0ce5hPE/s/UdTZzF2EAvD6wAfWmpkhAH9\ndF6bnfDPFYlhkfGgGyCmDzv4syzfSTkFqePcBvGqcB9oIeid71f+IMGnTLoL\nlFc2BbaHjw9dlb0IzKN1b4AWofIlpAlnlLyfaqWBLQuL5MTyls0+Zb4W/9qN\nakBaIGmoKYDZORrXZumBFgi6HkalYqOZCPTyhrMtLiDWTdiGqtu5xjljO5hd\ndx8AyEYFw5fMR78HHcI2KNLWmvmv+GMI8xAIRlZilI4LhJYU8DqDfFyBc1Ex\nxGf6dVukPGK+8CE8cZ1ZiS3DU9J1ijbZNbWS/E5WIpoZTZ8h8Ei5cuyD1xTS\nerilEvs30E/tiQrWhwbmaAnoKYKcpyXh812Hq+XqlkKwcEoUL/kar9gjuS2L\nUAacvoKUMP9RoHyTSF8TMkuUGH7oRx4nPz5bFH+f3+ZDk4wSHZkUkwKLFOGJ\n3LF+\r\n=zqdc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaEdxHipz/RkLDStoHvW/qh2Hn3Q4FIVCxdukyia4gCwIhAPU3FXsqEjE7/X6ggpJiRdxpMN7faCPCqV7ybBOfupBl"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.c452e4da.0_1621294362538_0.4687460846978573"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2212691a.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.2212691a.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.1a8d06483.0","@material/menu-surface":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.2212691a.0","@material/mwc-list":"0.22.0-canary.2212691a.0","@material/shape":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.1a8d06483.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"8fba3dfbfa73868ebfc76e8070cb5d33921df0f8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.2212691a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Vla9BEAsduvoWfJXA+bxB6RHtgrLEBLm2SDqqJbv7NlCdpcfenfF3PiaoFQQtzP7FbSwhmZv0WV8T2tyT34SWQ==","shasum":"5c14da658440f13e0bfb368979745837b821946b","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.2212691a.0.tgz","fileCount":29,"unpackedSize":113582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowHuCRA9TVsSAnZWagAACAYP/i1Ym8yrTMdtP9WV95p0\nfP3UbSHotzg8i9CIQZJovwIMu11NZRPIsNau1spblurRZM5QfY9sPub0zfN2\nV0+n4ZW8gYpPOOuPgkA0NDajwwJbVjkm1PHEIhcxXP3Tgo5LbBlxNElS6L2/\ntNo1t/L/syeOfhOuE/2UfcJdoEHNPNUUBm/NwiJLLwQytv0FfxtaVBsrn0xH\nWF/xF1T+u9BBE0XMV2OE3RpNQTGTKlQi/OVHYWYmBsEgB5ct1XXpuLin+Ywz\nrFn1MUVPSvqVSoFdxpU1XFg0dGD6o3FweCkfsh/Q64KvvJt9WArPqN0crl//\nNUhMc2B6zs7ACv4S32Wy/RxLBAMaLwPV2QWVGM0yuWKYJteEVHIwtK4nV94w\n4EonPmBxONuy1jMlvF9gw2TzdPZDFVVHkUh4/jViv4TnVeIvq9daQenbm/nc\nIXvrDJDTVAkangkKhILBUikDW+IebKhberhRwN1+/QETMYk/PqrKBXUV73hT\nOr0XmJyfOz+vDuH3BGqMM5SXiqh+xn04f9LBaIm3WdJ5RF5xdf6NOpHCLwBH\nSYacNTHFvKKNQe5LCFOe97loMcW4KmhxuMW3WQFIxusYb13osMh/GPr+Bind\n5HWxYtkQZ0YxMJ+60u6Ba7Kf3KHNivPqWzY7Rwbyv1MsGouQGtyFxE5TGX0n\nRLVy\r\n=LkQn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICCi2VxUDvcb5wxvNGmnr9Zc67R0nM38uVnem0HbTpH+AiEA5TB/0Ji04j/CFNz0K8AZZ+d5xKqFzEFcPJ58YTUtq7o="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.2212691a.0_1621295598366_0.8782536010674686"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.f748ff2f.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.f748ff2f.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.1a8d06483.0","@material/menu-surface":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.f748ff2f.0","@material/mwc-list":"0.22.0-canary.f748ff2f.0","@material/shape":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.1a8d06483.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"a83c1c5ee60e398896831041769b5c22e19b4621","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.f748ff2f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YhQXRqQ7anKTsyY2KQNSrSUXjjYPYPFWLncEpom7844+M7K8CaTiekAbIicLDEh6vyWvis9IDwBoUBF/IGQyVg==","shasum":"21e95b37ea7b294a58a1ce0fc015611a074e995a","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.f748ff2f.0.tgz","fileCount":29,"unpackedSize":113590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowjvCRA9TVsSAnZWagAAehMQAJeDTmxDFz4eVvk23eiO\nSTx95T/DzhTbn4BAKSim9nDl2bdet2yagFsEDlTORaeAzijwMG4BfukxOaq8\n7yXG5++bNBji+FXvIebAOAWRGLOxE9CTkHGkyZh+D2RT44ZG3UcBJ8h8X0Y/\nF1Bg7tgMlpaSpWueP5VqVirXuU+MC+c70cuyc6dEkY0VbGpz3JD1/APYjdV7\nhpvgSbLeqqpojJc1gO7WFu0w/l5dc+pXNbxPtuYR80Cq8Gf+Sqt5O5AnwVqC\nAo9UFjf5sY2osV3S1TGEL1UkhTKZI+LtYRs1cq4BsAo0zIJtcR/7POnjRGZb\n2t3fFuQleucmcyQlmrz8esR4vX2g1w6NsU31ZOEzBSW2E+cStWW8KvdJSXw9\n/AjjNw8vzqe7uy6dEfprx/kBQE2uOjaLWJWzyJMTBQ4RBAi3OZ9Sw9CZgW3N\nDmJKlgl6X1A20dO1VWI/A2lmD+YI4wVRfR7yI5oGBTiePRbr4fhfkSsMUqR+\nv2VyCgl1NuxaCs/sxTnoS8iBU1h1UFF9iKsDlPil+rIkoRIEQuqd2PbW7YG0\nC7dSVbUT4DvAqGjJCbqjcam3cCNujBv6HeNRxVrhOq8SzawyU3NKcOnNkN9C\nKpS5fK0pCWtxHLPHeaY2WlDjvThG2eMXXEBTIqz1k7QWe0Brcq4FsMTLlp21\nmade\r\n=Enmt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEl6p2AYL8Nczog4HO7rhu1pN475LJcRVzGlitwfL8QHAiEA/DY2rIs/lwtl+m6aTVmGkf2cpqk07qyZPGtnlQcxFIc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.f748ff2f.0_1621297391244_0.46456742793731687"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.cc04657a.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.cc04657a.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.1a8d06483.0","@material/menu-surface":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.cc04657a.0","@material/mwc-list":"0.22.0-canary.cc04657a.0","@material/shape":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.1a8d06483.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.cc04657a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-unXilkODM05Q4Dhmw54OItlRO1A+k8STuWnDSpM7nti1r5uh25BfJ64qs70OBMn4FM9fZGbOAvX1GfW5o/nYrA==","shasum":"61aa5d70af6509958aff9b583c5d86a048d23af2","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.cc04657a.0.tgz","fileCount":23,"unpackedSize":106912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgoxagCRA9TVsSAnZWagAAbOkP/0VFhxTcwj+2AylRcYuG\n6iZMn3bfv3EkVrZzbNMFlcwMZAZOJK5DN0aIGPJ+mPqVXBzj0fdi91c/PlHn\nLBWxACXzEkVwqG8wC4LjCoLqr66pK9uLRhinFp5072g306z2qL8ir7y0a9Xw\nvCID1df2qqzIkJ6QrNxcSPkTOVGecuaWRf38WLD2IjIMoleUOy2iJfZDpmkA\nmGEBtm97Cr/X+Fcwnmpm/Fm4D39kMLm7Eoc5uId89to8MbP8oudxgWSI68HG\nGwDdKjfdzkkSrMOHLPVuKDWGaJTWc9+ShTp5ler5m2oYDeoPdhlMOxCKLaS0\n/KYA28AYZrHLBWV98eCfIatUYxP0p3kDKdHkX2FoA11wjSVhsjZxwVTKSxrU\n4hx11U2b5ie5cFESuzaKOr/zE4GI7vS/2zwjMQC5aU5ju55UYtAkDw6TfHpz\nHfBiFhI8N8hW0F7ZtcFYHBRyI/EO1Bni6SGIkeiUVLqVAKv8tUjHCBNhjyKa\n9ur2qZLOZIA2QVaC1H+/ej3l4GnoMWT22PxhpeMv45HoIBlNYIT3yphQdbwI\ng4AFo2Q07hWqyjhBNq+bTZ/Pu3o2QpSSHrGhisGRyIjKYIFMVzev9n/5ABSl\nKe8pm4pI0whDeimd/GsSCOQfTu5bs8Vm9vpXHZFn7PhE/mzIpyi8HFO98YHT\ntoRV\r\n=h8Ql\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqy1e4KMow5rnDCQ8xHJKpb2kJ9RtoNP9fjKkRgFV2rwIgFiU4Mf7dQC9vUtq/7xltPpVXuDMrPrBCYYBM/osdf7c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.cc04657a.0_1621300895865_0.974218036495855"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.3a3114fa.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.3a3114fa.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.4bb5eea2b.0","@material/menu-surface":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.3a3114fa.0","@material/mwc-list":"0.22.0-canary.3a3114fa.0","@material/shape":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"217bbc3c5105a7f3ed67d47f0169dc3b8269adc7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.3a3114fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-98Sg4ar6eRVTWLl169pzEF4kLgPyH0VKFF0UXewxxT51MTTlU1JGfKON/6wruQIrpRj4E6p2SCWRC/e+Iluukg==","shasum":"9ebe0ec2e8285c2dc6735f77e1a2fa18ef4e9234","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.3a3114fa.0.tgz","fileCount":23,"unpackedSize":106912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpaIGCRA9TVsSAnZWagAAYdMP/3dii6d1abZy+ceF/Igr\nGhrGyNL0nyieOo1gIntnC9AfPfgom4yjxpOFrsrKCWcwGNDq2FvetTlTJo8N\nnX+gUUtQ5y8ID3ndt7gIUVV7yu3+/PvWVC0D2JxAuTNSP/wzJcfFwHwf8fgM\nbYHzORUtzz7+0GggFFsA9nnQWlis52nmpd5bxNiC2V9+b0FYnEWLtJYawKNX\n8QUuqxEu6R7S9jaWYvwZmiRNrM0zzFbI1jHwZErXrZeed2gglJMWmUX1okWm\nTpNm8X9wDxk/sQLVXGWxKs50lOihALJqDPnQPsMsuMIQIBPE8ROBbNWd5NXS\n+0m4j594W9nG8jA6NZJGsBEXOpWX3yb/yyfOucYCXyFREkAAGpjQm6VcCzUT\nANQ8qik9nbmY1S5QjIyFC3XXiNg2+f6MR3kL/4KJV4EGd/mGE0h1RUHlyYDH\nfWSVlZTYhkyDCo28odzBO/kVdSYYHuaKP3gFKRr62QSraw9N7nlqJEf0Et0J\nSQo3ATyGxmwhVj1M6VFysKHLUOMt5YmfzdAPbNAFgpqPmaarXlQEYGbkshLh\nyZY/C97cG7jfMgXMq9FFAkIYN/kFbz8MqYxEVqJ5EVWHYUE/Z8Aqd4BM3zV3\ndCV947zJwQ9YuCRDxLNUeTeOk2fztgsw+CXBo9L23AEuCE9TMmBnlV5NVZ1o\ndHUo\r\n=2Xlg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCLSLJHyotWKKOc+ca+A3a90W3wjRTqucw4rbYgaHbQ1wIgbDM4eYCgSNrPDqkM0VeRziqhCYJcrZgnEpTdGLSynj4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.3a3114fa.0_1621467653761_0.2251748984602373"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b46bdf83.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.b46bdf83.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.4bb5eea2b.0","@material/menu-surface":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.b46bdf83.0","@material/mwc-list":"0.22.0-canary.b46bdf83.0","@material/shape":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"9095fd5cb7570c346d2093f1eb444f3035718920","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.b46bdf83.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-L4aJ8E0lfE96fIEBYbnzFznCvTFaaqa6WmO7b43KfJFgPEESD6yowaMklQEZxuMmxjoZcWxhtJMxQy4s+iozfw==","shasum":"01c02a6a313a72ea09f76bdcfbac729745df83ed","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.b46bdf83.0.tgz","fileCount":23,"unpackedSize":106912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpcCtCRA9TVsSAnZWagAAzUcP/0RWQF/m9Lu+ooTx6TUW\nzBCY8rkJtlQa84HUTHZtsrTf7dfx8ArnjfLD9E6bAAhOwTMatzIX6M0YePUX\nYimiozVZb6TgBt5kVFtTzY27UF986SAKD9uDSYmd1VpD9gggwLSEUhXjQTsP\nnfhfjU2Ez0+jkSicT+z2C60H6P8GmJsIrc+7zSXEqIfnnSZ+1pCYPmJzeNU/\nkJ5ypmEndW+5iVlZwniu2yodhwvWKma4HcbW3Ni8GpfFcykufEzKL5z304ym\nU5w/Biz1/U1gMvsd7HYE1PeJ3+9gKYF2FkEqCKSHUJRQGi9s/yXwmbSnczlt\nzDnCo7XxVkDKyw0fiNQ2tbVUHZeYVnLclyvCKmb59A9y5GJbnDH+pJLRGnjG\ntfwMJapUro5AAxWUCfAPCthiPymEjT8KZwBGTROlIssfHM9rNfYsiKQX5Voq\nUCxfmP/eiL0TdmtIGow89k2Yccu8LENsFwY6FiBPdIAge7Kn91VEeGklrGWb\nCbTKC+paFZpcm/fhsdfwO+rL7my+TjEW4vCMDyw2+uPuj6ULODWlp+WO91Hs\ngaMVkjtYb3o7wvS6x6S0+eW3+DJYgW0qQPCMwGPm9crmdwFHqWSx33HUqDu2\nu2zARdpJOzkl7B6p4V5lld4/Q13u2viUTDx+xMAOSupRfWWjWQy4gCrwcN8C\n5gT/\r\n=mK+v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDKib71XVm0cHi+r/gyMP6Gax2LdXQg0KD2T3CqTXwueQIhAPNgSLokllfi5ZlybM820vtnX6K+eN4MC1SrP7N+fSyi"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.b46bdf83.0_1621475501271_0.24295828470344882"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b401a081.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.b401a081.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.4bb5eea2b.0","@material/menu-surface":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.b401a081.0","@material/mwc-list":"0.22.0-canary.b401a081.0","@material/shape":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"3f253eb320a1f9b9e236e2c6c0503900e63e2c6b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.b401a081.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Uza3kp7DU4fYjdQ+OfMLhxCIYd8hvCNq2Uo4AeRB35Zsx1wPepfKTkIn76zncz2ndAI3jdLK4ibZE+GN94sDvA==","shasum":"d19ef382c769f8d4316bd0ad71b51d3b09909459","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.b401a081.0.tgz","fileCount":23,"unpackedSize":106912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqED+CRA9TVsSAnZWagAADo8QAI8AKOuKtfPMdxHK+qpx\nCPEzKQ24E78uJkVuKDAlfv2MbYF/H1GYI62mzAt/Mh9lnA7pCgDsyAbq4o+O\n4jR1aorQWhwJcJErxUvCPXZBNQwT1cZ3/4Urv0nN+Hk2hUbbjJasJ1GmqQ8f\no/DOgDCrfhMx5BVAQzLGmdNB0CpFUNC8QFomuJBvkmnGn0Tx52R6HltQ72cU\ndvYP2QWhxvJpX20ZK5umrmmj8UOZA59pyd+GE8b5UCzCoXOQSruYeKIZcxiH\nDiHr3N0AS39/iPrrMS8sX75GiiX7y74UDT06aD2PBETvoLdkscW7e21RdBo8\nM7YQpXfD43voshkk1w5ZPahpfARSqQtVi7KeRxZEGu3fxIPyMhLFcKk8gxy5\namqZw/mhKW2+WsLu6rDQco7H4r41rhwYkNPaieTFV+6k6M3AArxMdFF4h2va\nZ+oL0PRItaMtbYTEz3ZQDHnTTgWaOJK2w4HCczO3aZ0r5nuVX3KHxhlMkYv4\nN5q/MmgdhvBIUrIf9+DucHobzcuxflwFiacraahVl2GzoqIWuV2oyT8dW4rJ\nhqCAKd3XpfB492+76n4hOUCpJ7yEuPxZLEnSp4jKM6c0Hqq3Fc4he8TYQbU4\n8XV00MepHnNpFNznUJHtZTLBUvDaSrPUpb/CbZET+0zKclvkIdLhR50xGWcl\n3ZBC\r\n=QTMo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdcCSkw06dazwtTUyXZsmJY78NYPh0C90YLxzd3IW4kwIgQOP2a9lOa58AjI3MSmZ5VkcWAFbaWC6rZnxGGidZ4t4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.b401a081.0_1621639421844_0.16588374541078266"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.012c8dc0.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.012c8dc0.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.4bb5eea2b.0","@material/menu-surface":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.012c8dc0.0","@material/mwc-list":"0.22.0-canary.012c8dc0.0","@material/shape":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"7a0952c38da1624fb6d0653e07cc5ebf284120f3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.012c8dc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-goov3GVkUnLXd2t9SyxuCRMfjB1oZ+RedgBWAqIP6jmHCkMIgGXJRibUnyusP2hNyfV4ddeqRmTUBKAAXT1NRw==","shasum":"f6987221b654bee5c0dcd741134a83ffa23be56c","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.012c8dc0.0.tgz","fileCount":23,"unpackedSize":106912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqE2CCRA9TVsSAnZWagAAlz8P/i9pkdqpLNQO6aJSQMHW\ny2a9fv4z2CaIlvyMe87ihYfr72B3r1ebiZYwmM+i/1Uh9Yol9SgXDIXr9qOB\n3bgwWz0DRgSLa/rRRpAFTiolUH/FACocipJeIht3JaaBVUN6kIQ8/q09entf\nbv6BIdopftgyFVXeBe54QD6if26poIRa2AwSFVp9oIO34U8GQ9ZGrKyTmdsK\niJZHSBNTLVzNDJXuLGAT03EnJ+Qam7zXPQPiS8VqjFEsUd6I7ggNw1V5A4GG\n6vwwK17SOC8/JDAPi/HOv32W1i1eWiL0RzoLnlvMnSMHdtWdUWjJMBDdSJvB\n+J4SFCpVKTb0OjSaZUvhjJALlYgQe8C5G0abXhFIb5DI1q3NJtGyBux/8KOc\ncOobFazonqKYgkgOhxOT4mircfe9M/NWkqpZjPfAchjKP0V8S122IpemHWpK\niKo17BFt5H98rvhnjnmRMQjt6SRhe0AwnPRb1mhL8aJF1x23VN335GAGJiov\nve6VBodTUSRjkzbN5BO9ElCt0Hlo2wdHW9rRInD5YoN0LYJKC8+ZTH8ntBqe\n01IIc1iqaPFgMeHQByGCZZAIKw8tZnf2r2CFMnUjocIbR9YQPVR7zFSErDkw\nGMSOlfl+Oc9S2elSoNR8cI4B1sUrO1ZzFUMBnGLzgjH/pPzWuk1RUMYBYMp4\nabh3\r\n=M+CN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDEafOeCycXVyTVARQANSXo6jbyaeNhMyS28onWEk9vEAiEA0d9aI+sum/xeXEM/q7vjzIrJMj1WgA3fKiVMBv55Jxo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.012c8dc0.0_1621642625899_0.12673353048385283"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e01a1731.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.e01a1731.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.4bb5eea2b.0","@material/menu-surface":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.e01a1731.0","@material/mwc-list":"0.22.0-canary.e01a1731.0","@material/shape":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"8afd20b0913094a1c3c1b084d0bec7d38724fa00","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.e01a1731.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tSGY89/3Itg+BGAc+SI24kIdrpfvP744OQ0mdx/+Wnp+daNgzJaNXJLd2JlAxSsd9LTbqpctVSdP1nwJjcSg5Q==","shasum":"76adc84cb9c307f97b4f4d2385cd1a2634eefad8","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.e01a1731.0.tgz","fileCount":23,"unpackedSize":106912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq85SCRA9TVsSAnZWagAA7DcP/1nc2WkNZsh826gR55tT\nc1MWwx8fVNBi07kB3VzhtM+QrqNnFqqL1WGJHBmMuo/Hr/uvO9bLLzFvzAxg\npIkRLFuBi4AmYaMH89Ye+u30GD/+xvbrMXG9lP9L+RGY4yRN1H21RGJ+j7xE\ndFohRr0Kn/GBHGXsHkuMtTpfk4LMnA+/KCG/yARft1kFdHZ2pPpg/tTT+Am2\nRboZTDGyKi7C1qVFhnJrL/GtapVvCwBYpKAUst/k68sq2fRRsxPpXScttQIi\nGlJGgO26R9h9Lala/KvTIycpus8rYMIJWTN+vP9OdDvfB+Cj5y2pSSCA+oQM\niU4COesLMFtMzpTZlkUPmRJWjUYP4kl3Zs+bWyYwuXQqiUtxUwoZw5BJKxR+\ncEUFcWz1mxjLp8Ow8CaKSNSHQOyiUwyoeuf+vVBKXYhXfocX7c+SoJIZg6z7\n0t93lcLOAjLhBo8UWURlxl1H01ZX85nBINJHGQuVo07UphztbPBp1UUxlu9Y\nttRBOO0GSQYYg/BLvLC/1HnITMQbOBDL8ymUSQZltdEOgivCxCL6udogyYe9\nN/HCUfkVakZJXvHw5UhRwrTAm2ky/Hw9nZwA3uJOREET2JVWLYEVkp1RH4jr\nLVL1C8W5rTR10eydUOQ/kZU3WJrcddulUiIfnz0oOfXCXWvPrPzF4Z4xRIR/\n+/sH\r\n=JKxe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/t3gIRN3mGUB1YefoL9msqrnJIBks4tQamSg5AOqnNgIgZqX266a5J/shQZ95DY+kZ+37DEKJncbyLAAL1U7ouAc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.e01a1731.0_1621872210247_0.09950648657993844"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.59174b9f.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.59174b9f.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.4bb5eea2b.0","@material/menu-surface":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.59174b9f.0","@material/mwc-list":"0.22.0-canary.59174b9f.0","@material/shape":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.59174b9f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-iCH5f+dBOsGenZPgeOfA8J7oTLDkkFTC+XFDa5ApTLSDjUFDQaV7eIo/LMQplyDDmFEvwrlui4mjP+gGCVLFng==","shasum":"05b0f1e3bb5019cf052eb31ef7d4e4a4a70bd7ab","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.59174b9f.0.tgz","fileCount":23,"unpackedSize":106912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrTvTCRA9TVsSAnZWagAApdcP/j1IUfIPi9V5YruGg5Tv\nMUfkUufOw84TpOOSHRi6VoFMyPY/9Q3YNYVQxI0NQWJO2N+j5dzBL4FNisZp\nqNb7WHSWfUAkglHuu+JT/1UUZ/6BJgjpRQcwK7OsM4IsfudjvmVB544FJmND\nSc+Irqo2R5OnKoBtNnE8NDp2JPQRohqAC+IZXmsqdQlY3f5oJ9awvtbzAn/V\nsscnpbeQpsq9fS2GOZIaW2vMuTcH9Y7j7y4/azpFaVeoY9/jeWFWhXmg4clZ\nBy09FxLs73NA40KKVxEvR9Yl0TtOF4ZPPfA+KPyE5RI6WO3/E9Kq4BUZ6oX6\nUUXQHoQo8YaCadgG+1ZatPvO6MfKN1M7XTiLb2w/4o7B0NcEO1vbqqxaON/Z\nCNyuMCVLNETTveDlTV2lyxCuKF1jDYBqdmERbFn4UN6birzP0ShQDlEdgBRM\nywCWMijnt3R9gHfboYLn1qA5iDBE2vZRdakD58zx+s9Ai6OSHPH34HtA0Mtn\nrZHar7tcMaRCfdKadA14LEhGlfFhCNM+wTavg6XWvHnsAhLG9XvA65DZZuQU\npWJhYC3gEgR5pTNHzXH68+tlNyReTmbRsafROH0GiMCVUYj+aRvFBKvl4bLD\n8K2XO27LR7zf+hUyLR+vobgZGaUwoWoPTO983RzNf7/jWZH4fm9EewNQfxSx\nHJqm\r\n=Zjpp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCL5YyMBqIDR5WU51l/XhVb5GDKOojk2PG9ZExas1wI6wIhAMWfy29W+tTe3wZTci3aPHzeEi7Q49wCrkLtHqWLJNnb"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.59174b9f.0_1621965779285_0.3030927923277804"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c96cb2e0.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.c96cb2e0.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.4bb5eea2b.0","@material/menu-surface":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.c96cb2e0.0","@material/mwc-list":"0.22.0-canary.c96cb2e0.0","@material/shape":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"516910ae9bfae62513b95080369ed2be100b1c27","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.c96cb2e0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4EFoPojVMrv0gpmv0aa7vA2aUJFwZryqWKrmuxJiltNAalRmKvIqyDVEms4OFndQ5XtMhVBLFQuG27dwwLgttQ==","shasum":"9d9a19dbd57826ec11b0982f901188a24251f0b8","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.c96cb2e0.0.tgz","fileCount":23,"unpackedSize":106912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrUw9CRA9TVsSAnZWagAAp6oP+QD/KbixRi6x4AveU/2E\nirN3U2c8xS5pt/fEi3IptGQkVCSkIueKVowhcRNqYkRdMVvE+XxP51zKJvyM\nYyPq0A6i/J3n8BJu9rXCeIH5JwITc9TJPcwQnr65t+nI6eEZB4q6XM4i1vRK\ncQ1LP3CBrUzQ/tqP2btfpVnzEQS8zu1yma4pFV6zHFM4O73E/ieHTlLmCWMm\nHSNpQ+YOhUoizqhYRIGUmoEBXViryWbeGxToqVOUEjiyZHMRYI30tvZEMaA4\n/drjpkrgLZke8EaPljKSFtfrLI0lRgagNFDzhn4qi8qUUCVGWAcVMRkOyMjY\nqQSaKdujp/wVHFfQrykwLM920wiNtZCUYeGeAyK+TtZNvRs0gS3w9K+UwsZF\nbpu3hqhkg3ZXj47yzk9pnUjcGu6MFwNd5v2l/NmZKBfG4W6jRcupNp2nmspn\n/CsMFEnN1TsQeYiCvl9tUdIop+jbWePz1cjPIfQC8qdKGENra8qgs9K69Sk7\n2vrrylkwcsYwqUoW+G2WDojcR7Tt6RAdfBzXZY8eHIOWJ8lLKTp3EDbDc3jf\nmhNds1+ng/bBNkiC6Ov1YgKqi/Bq3BanZEXBtCY9nUPongX677zIUTXUzne3\nnNhu4sVjP6Vygh4NOruA7lsYa7GfdU4JYlMATfVOh7+M9Kxb6bDojuflVIpp\n+p3w\r\n=9vmM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJkIaGIDdYbh29AaNM/uNmdBnucNN1rwGKj6KChytzngIhAIsYR4ibk9pI3luf8FW65yVbYVzVeRYGDdQttkW48fwB"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.c96cb2e0.0_1621969980996_0.38733746721260065"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b9b0e330.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.b9b0e330.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.4bb5eea2b.0","@material/menu-surface":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.b9b0e330.0","@material/mwc-list":"0.22.0-canary.b9b0e330.0","@material/shape":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"18c2325baf4aba3a786f872ae497d8ee283800e0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.b9b0e330.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mgNSCEUauNJv/2tUy5IVnowQ0QigLUljRVUkNsB2y3nqyvnvNe4+wZQ/GyU0ZPPD4yyHaMrJnmdmWkhNb+vvKQ==","shasum":"fbf90006bf8be98d378e10163122a1816acac0ce","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.b9b0e330.0.tgz","fileCount":23,"unpackedSize":106912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWWSCRA9TVsSAnZWagAAAk0P/1Iu2ptwf4Wxz2lkTi0I\nyo5PdD7Tft98EjoArplb4txx4SLjAAfYdcALH8C8ZIoIqphbylI4ZPniJtdy\nwdGpy5YWtzvvLyr8F3oiboL+qZwrCdwBJsZPlHmuz8yZBDDcLqhsAwTPg1L4\nb0BccJUfpVqn8QXfck8Y7aMcI4D1VTmo9QZxgj1jz+5ed6rGvoT3CIrtBxfR\nE0HST8lc1JkA3Un/r3jxjWRRJPuhLdWgKl1DJShRu1ZjUmNcwudrfKnWJ12g\naqsYCL9dKlgn0+3J74x6JcSkwYoQoRFkSytm74rOWxnm13zOqGcSbILOXIlU\nJ/dUb+GbTuzzrikCayIqwx30eb/VDOeFq7mL+g0Cv3mmO/8WF08uteL+6yuA\nQ2QDbA7L93va9H6rrEA+JsHRoPAiwy+LBAUHGU9NqCA73RiuvTYuu8M4K5vm\n8VVHElCZTBhRqqxlSmoqLubQPZfz96obZFBSCOQJpMhhvzKjf2HQyvi0Mjk6\nidjXPTfleN3Xtoc6uQNeyD+a500SbJCNEU/g8HX35EgFPR7mwcKyMn4gKcCS\nS6yi06hGxgjBOaSFSxYodKNb8fkiTX22XR1oUPhHuk+KWNBz97v6eJlJpQ4j\nSwzSExFJusLk6d+2Et/LqR/yychAotP/EQoSjkbOppZZ/6p+wS4YNymdO5Aj\nHHT2\r\n=nEKr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+Fp7txG+wC1CWJKwY3YyzrkuImwGIg7M5CqLLV4miXgIhAMBFLFgup/fRpBK9SslDE2xTCI+TiCAC/dz9Q2hXvffJ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.b9b0e330.0_1621976465889_0.48965825219921344"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ea2a8063.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.ea2a8063.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.4bb5eea2b.0","@material/menu-surface":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.ea2a8063.0","@material/mwc-list":"0.22.0-canary.ea2a8063.0","@material/shape":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"0b10a1191b28a4155d8f169ab9a5a3003efd3fe5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.ea2a8063.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-HiOcgvbmfZMDbDgandkc68Q1gpWbK6nggY0NJMMIpkg9XLzwRf1QPwX2aaMbC+CNVrJ2684kVHXOqHMv0XVyBQ==","shasum":"e55fde2300f2c6879c78c58e063ef2da0fc1a08a","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.ea2a8063.0.tgz","fileCount":23,"unpackedSize":106944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWbECRA9TVsSAnZWagAAgIgP/iXyrYhwfTm5rp6GwtYT\nFQTsUjDiHlw9/um89Z4hpmPTj0UcX5XJi+6AcgqQPTmIYKcdXvBJVo175+wd\nTCrG3xVS+GQpuXVLcQwt76WyKeGMmkXoF+Un+veh+lePIvFMbsg1Lb9uaXvm\nEPhuU36FkAuLsKftNdw+4Fudldm95MdCUzAnaYUIWjqUIwYkQMYtS9hV9MJV\n78koWYZ1b+Ja1pbWYrvQ22uBhx9Sb9tCiWOZL69MmALGSgIlxkpcn1hRyF5k\nz0tMxRBhAXWTRizd//08xb23sLYD17SQ82wCJJyud5H9Kpd/+GGvsLdwLtTE\nmFFBLa5HJyGDj+MScyHbo8CRHAvx+9Cf4528fFW2QoPWv+fgM4SWCMH6Rj3z\n1RBa6I6QQkIdZVLUTV4SaunSpNykSG1Wr83zWh/uR731u3Iu5+V2ZjT+Y9+8\nAFR/Y+7vnaBgXMbFH/kYdRzmw7PjX+sXKCQIxFGuJjfe85r+fgPKWMxv2vsT\nQX+g2o5aRN3PqjHtiLDum8P46marQ3mQCpxON11Ea7oyGQE/wtbD+Cue4YGO\ncwaEaRxOg9RE1cNK1qm1w+4FkrScy4torlEgAWSebm9AKfBLkyojqg/KyAj+\nVClCW7VIy3/qJNDJnwRaiGRrYFXMWsn6gw7ZuinjkCXcndgKngftN/Pk8afp\n6U/C\r\n=JAIf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDpalOJPIP9iaJ8q0pkIKZwk3SuugCe9VCEFC5JLM3R+gIhAL92dKlews2wcGCyQ5Tl/zIek7CIXe4PyBrzdhjjrWU6"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.ea2a8063.0_1621976772528_0.17900667854601693"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.60cd9178.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.60cd9178.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.fadab3372.0","@material/menu-surface":"=12.0.0-canary.fadab3372.0","@material/mwc-base":"0.22.0-canary.60cd9178.0","@material/mwc-list":"0.22.0-canary.60cd9178.0","@material/shape":"=12.0.0-canary.fadab3372.0","@material/theme":"=12.0.0-canary.fadab3372.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.fadab3372.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"b194465fb86d4af03f65ac72d9b8427df2a2e189","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.60cd9178.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-O2ZAt2PNVzjKdiF0MQ9bx2BziR2mKY7q2bbf5ysjjSA1KBJndEzfRTyWIQ8ZiiELQSID83ayP2qcNIlQSOF5Wg==","shasum":"367f75862d8aedd662664f1fefc9b25335e32860","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.60cd9178.0.tgz","fileCount":23,"unpackedSize":106956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrYTjCRA9TVsSAnZWagAAPGUP/jvxjrZcxSCYB8YYkUYU\n7wAxoGZRqvHmMvq7cnGDKn+qTbAfhkJAkFyct9nrNlcWaUp5I9pZZYX6YPT2\n5oq21ap+HFmY+Xvh24WvokqJC7Ueg0AzFHSP0GzsfBmY3p+pD4voEh/6Uh1D\nbmJZMhOTemW2On2epHO2JVs3KyRCnbUd9Th/JUpJWAOKA6BjijDMFAGwzmom\nM4xjPX7HxBsVo496wjpixZIrf+w3Apjcn6LSZrrFLPazVg9FHaEumn4QePxD\n8burw4+pXNkq55o3Ieqaf8TpwspFMto4ZlUlitEM7AMCqn74xgi6idI02alU\nZtRLofMx5Cg8OLZKZOZr9jv/2YMNhTMEld8/yuOFFGGWtgkPkwX2pnGEwo2Q\n97g4+/v0H5epGoGc6jwAmtaXq1uzIu/VVbuhXlMg870Bq9wzxVz+WyGOn1HX\nOysLy6acqEMDnK6If6YZNehcf8u18fNpHbSllRtn9RxlfKqVaL6nfxcd8xT7\nh8kTQnThNP0/AacrT57VwbGPcTsyzPpP2UegKs/2pL29e2kfq9xe6eJuhZe7\nB8eR5QtHmdh9zEffYp9COam+tnQgObYCErp0qYS03OKTp51UsMrLlutxd54t\nG5F9jDS69DFbkIfNesVj/6GkIRMKostCdxxQf0q+VnEoX5/tAHjxlnnxPZQE\nAaVv\r\n=G3JM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOBoefNfpx8IIVvM8VtRCScGsMIXVbs91Kcr4xlYYR6AIhAMEQys2JRvhAA722/TRtiVFHX17wyxsU8PS5GYwX9VdB"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.60cd9178.0_1621984483295_0.31958791275552767"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b99c77d5.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.b99c77d5.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.ec31ae1ed.0","@material/menu-surface":"=12.0.0-canary.ec31ae1ed.0","@material/mwc-base":"0.22.0-canary.b99c77d5.0","@material/mwc-list":"0.22.0-canary.b99c77d5.0","@material/shape":"=12.0.0-canary.ec31ae1ed.0","@material/theme":"=12.0.0-canary.ec31ae1ed.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.ec31ae1ed.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"5fda182a00532c3dce9d3841b88c80c56a8dc757","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.b99c77d5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Qz4PYQXzK1j3f21JM+v5hRJQ1TuQRcBWGsGvCG32bzGf/fZcuZOKD2Vz94/Df/8vCR1gAqL2xBIV7/cIFKvNEA==","shasum":"b30ce85013f38a54f3045c1ce2ed11a8c0540f61","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.b99c77d5.0.tgz","fileCount":23,"unpackedSize":106956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrp34CRA9TVsSAnZWagAAvxMP/2TF5mJjr9uLic9y9iRj\nQ23H913h9bIEjVccYBAsxTGslVSY556CwVmKJgAbI0SKUcOiDkZsWIgAkHKW\nnCjAU/sPPAZYnE6wq+owuKI7ioiE42J98eqI85AYMVgLV+hxaQ6/47omFym4\nfHRHrg6sJrgiCIZ0D4aJBV4pve5ifRm7sZZK70JL1jqkGvsSqU38CbyPI1gw\ntS4G9e+IRJj9MUlXqaPy+qILZ2lL4PWa+gOpCQ6+UknoGSPfRaVwZ/RmEYNx\nMtIoqcm49TbkMp2wz5NhSvfEo00Ch8OJGOCL0hC7SQYVS7PUWGVyvasA2YXu\nj4WfBFcCOKLml049oGPOrn+egf/eWYbN+rt6fXI1J5uLhHFDIAhQcTaGi0dv\nE9ChVMBqVmmICnJJ4HQSoPG4ymxNJ+SKYr3UbzriuZ187tg/w0aTh6a3KkbJ\ndnLwxg8RnFeScV5Hidhxyvr4kKtP4rkL02QOhaslXeMgqeCb8uvfTKnR4z08\n93aq0MnBDha8by4jdhPwNACus5+HPAPVOyFCbht1kb029Cv21Uh600ejWWKd\nD7lhNgjwS/YAqqyoqLkts+VP52kq49fnvg/3oDuQGQQ0kDMnPOjZ/FYJQY62\nN2FWNIdNemS8HZUMkBpHcngsnGgwUjusJkz4s7uEtVAKbXkynOGCTMxOPUSS\nf6xs\r\n=32DH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA1QjGC3ku+m5bmdsqKcv2PZP8rAifpp/wU0muMICiacAiEAgTOUa8kxLJVm1OLHbuDnU8S9O2Roh/vAmPLHPu0HtZc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.b99c77d5.0_1622056439514_0.49190197807625546"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.0de82c12.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.0de82c12.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.ec31ae1ed.0","@material/menu-surface":"=12.0.0-canary.ec31ae1ed.0","@material/mwc-base":"0.22.0-canary.0de82c12.0","@material/mwc-list":"0.22.0-canary.0de82c12.0","@material/shape":"=12.0.0-canary.ec31ae1ed.0","@material/theme":"=12.0.0-canary.ec31ae1ed.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.ec31ae1ed.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"02037fe47532247fb8d3f160ce76eecc87a64963","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.0de82c12.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-duWm7p6QvswY9qPksWNCOqfDz335XlWkItcjT9RBo9AxeFbhBIaQQ6tUGJT9EMSIMcz4bWPA1c3hZeHMvbv1GQ==","shasum":"9d6a67a36b1f57293afd559f671bc3277d532776","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.0de82c12.0.tgz","fileCount":23,"unpackedSize":106956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrr5FCRA9TVsSAnZWagAAXbMQAIkPwKkilUBKaRRqgBES\nLJ2PebZuv0e4goGEwW3zzVdqjNrZalGpICiWXydNBt8MvZ4W9T6UJo8r0zws\nnlnuRPVCpWwyTYgwy8kaY4MUZbGt9fq3E18Fhkm58TQ3R/kx3tTCoeoy1/KI\nUL1JWmLwUTnKrRWKgLe7lRi67uEZryR22szqEL9N3C9PuulA9nWufUTNF46v\n7yoz7nZplMrFtH4aDNUW4LDadl5uRRMwxT3uvLXyYLKBPHjXa2Lpo6tFEtID\nbKdildvRCYsBnKKlfxB5Tptc7Krq/N7d+5ymHVol7oTL4jIA39imXSYhE0Le\nzFqxltUxKQMGWPJFF5SFbC9gKofQCmxqc7A8P5SoGLh07nzrX2RPmd+sjQLk\nE0g0/5vA7AYxqIj/6hx1hJVjJ7cggcGIqYjzvFIhumbobPmH5JZJpJaEtM32\nnrFbR1Tr2Kbz6VZya+uX64ivCMeJ3OfBhxrm5Dy8Wxh092DBOaZVtmFkO6bh\n+lwWEqFM3S7JifN8uhMv8V3atdZGDqsgBWsQVCtakUz6iZeC1oF1oBlRqqRj\n9zMoFs5ae1vtAewohqOt+RIxdCKhYpyGIT66rrEBhx9Mb9dIV/5wXa4DVRUu\nfAYqFeE/ZNDDPEzZPLDzGIMAIvCfZIhkOeX05honIU92AB7SjJJwtF98EW76\ncz6/\r\n=yD4Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfHvS/T2pszyahcArH36jYoIBeflzn4skPMTnuqcAJygIgKtlbUCh0rBKkyV0PDXGeLeocnrZ9D3O2Wm49tykq9Qc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.0de82c12.0_1622064708873_0.2753859746556493"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.227a4614.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.227a4614.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.ec31ae1ed.0","@material/menu-surface":"=12.0.0-canary.ec31ae1ed.0","@material/mwc-base":"0.22.0-canary.227a4614.0","@material/mwc-list":"0.22.0-canary.227a4614.0","@material/shape":"=12.0.0-canary.ec31ae1ed.0","@material/theme":"=12.0.0-canary.ec31ae1ed.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.ec31ae1ed.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"882557fee992155765312df09397dd80bd837720","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.227a4614.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LvkqB4Fp1wqQ4tjnfyJpV2AZMthdeeupeDA8mHFthxfxcScRQCUBpbXAJuiyLQIndDkGdKJSLXzGqmPPw46rJw==","shasum":"96111be2062637bac0daeea04dd719d793e69c6f","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.227a4614.0.tgz","fileCount":23,"unpackedSize":106956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8LxCRA9TVsSAnZWagAAWkwP/j+0+Ww4E7qbfNJFwefw\nWiArj+wuZLiH4Fud7cdzxOZNE3gMWwodvYBV82cQ439LnkXMR9vghNg80YXj\nVyKFiwvLfVMA7b+xehiDVBX97JHFxMbOtDl/pmmH4P1m/D4wM4xpU6GEu/2D\nf9oNSFcJrOatapzxvn1F8imn+gfpfyPDMRB0sTVMtp3QCnxUW93MKAUQht4y\nKpb4lp/dAElJP+9qcarSCabxSulZRZ3Dn6ypNAXq/XcfisfGpXVnJzR6sEBF\nWZ24Gok1Ak3RDv3YDR+hbhXUhk4vmc4GFjQ7iJ7okSHzpaTY5dTmtMq3LL8z\nG3bof4/CrZfjA+vjAc386us0xVCCDYDT3SC83CCb3v3nVKLr4ZXZLu+xCC8f\nhOHdr/zfOErXoIRRaDKCOdvBfx7kPZk1Xda2WkLnsr5Bob0sOPt3ZHM99nmJ\nEjAFCPKC8Yulk8e3uIOjZJmDlpd6Q4wGovl0kdW6B+5NlRsOwBqjfLQE/bHa\niLm3r0zuSNwJAd5VFKhwk3YJ9iHN7Im/cE2vV1gq6urn6RfP0xufmTuTCBvV\nMNEXdEDKyn/m/Ry2T8p7LBv5eUy4ndc8DlpI4JcII4Lqy6068EdGETEBRiDn\no6Znzfg9kdEfaB9Iiah4XIQuSznLOaxRm6zsGyRflMxffvLSeG0xJHjbN0Ws\nTx4J\r\n=+Zqh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCX7BodEdaxS4vB0UBQsGDY4P2kKYlKTWW6bYEgITuSHQIhANCK2h1DJkjyY9QoU8V/9C4xas+A4hPxDbVC2Y0i5tcH"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.227a4614.0_1622131440956_0.971173184963952"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b3d21d31.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.b3d21d31.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.8530d3514.0","@material/menu-surface":"=12.0.0-canary.8530d3514.0","@material/mwc-base":"0.22.0-canary.b3d21d31.0","@material/mwc-list":"0.22.0-canary.b3d21d31.0","@material/shape":"=12.0.0-canary.8530d3514.0","@material/theme":"=12.0.0-canary.8530d3514.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.8530d3514.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"0346549e5547eca4c47152eae0253d802633b850","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.b3d21d31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-f7bq47deNogD87rKVXeCQ5ZW7SXOcNe01+Z3w3FvEhbTu1xvyK1RDd4EiNrI+f3DHJaprkiPHw6XZAUdxyMWrg==","shasum":"85d7787b555f30b5900f2f5d4acad401a7144c9b","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.b3d21d31.0.tgz","fileCount":23,"unpackedSize":106944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr+jnCRA9TVsSAnZWagAAtDwP/jPknYGINyBSmLtvyxY0\npQPMjeON1OAXH1sIfNRAhp+Ew4mLjnGo7tMV6nUSzyRtF10gKXPPisMCafL8\n4wKOmjGo/HDsX0MuwJvzvViga+J0tO9IzWJISEQrx+9y03WrjY6Qn0KsBlAr\n900bQvxCb893I6LXeKy2adEgcMEAOMoHWvBS559OB4WwKuRKGNjohps+Doha\nuKmVCdVtv9EMYoIBuqjzlRb8LJRalSjMA3C/9ZlP3riiF+rt230tbjPtsQIj\ncsz9foNOMsNsS3wg34oF1i6Ms745AzOW2PlH6fGpwSM5GzrUeT9z+1vNiGsQ\n/HZnqYVfmiQB6m1WWUzMoi1fSSZJZKL65MFZvs/cdgUrudbjRq+mzTN4AFYf\nQ1GUWPEGyrZVXeF7Wy+PHFdayduy+RvmA7G+C9YRFe2WMNDOKUrujDIoOb1A\n4UHSTcO9z5WeSVlUf9LAbPRwq5eBmd7xcCrl9hPBy9bb3Gnopz6IclQRaG2a\n2m3aqxm8kQp970CAB5CeA8sbEB7UBj4zgvG2VF9VTt8fwnGBBK6VSedQbKAd\npRqUKedTH4LbTNxbFElm7oH44A9SJwcKP6ZfMn1R+iJ/G6OhcOQoWhlrz8Ds\nxeSHyJrava+lJnWja9ZEgzIfaM3cY0lo1qPNXZgv8ltC4DVDULhuTzIsDVbh\nF+mG\r\n=nqrk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGXD7pRBIoKVwOwaZox+BkxUZSeNC2J/Uunq8yUTzE5lAiEA+PH8cXXM7zW9v5/3nFMhyZhpYzvIqQ3MKY0v73wyAko="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.b3d21d31.0_1622141158547_0.43510809662060557"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.288c33ec.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.288c33ec.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.00b5899dc.0","@material/menu-surface":"=12.0.0-canary.00b5899dc.0","@material/mwc-base":"0.22.0-canary.288c33ec.0","@material/mwc-list":"0.22.0-canary.288c33ec.0","@material/shape":"=12.0.0-canary.00b5899dc.0","@material/theme":"=12.0.0-canary.00b5899dc.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.00b5899dc.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"69149a859b2cb2efd7d7cb7a55acad20d60fbca2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.288c33ec.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Ic+aw/vchlpQp/h6VgvzQnqXdaC70RFnvKbpMuA11vLwf375bpYCpMHV/douu0woEewmLJa8+ONJqNZLaUHqDw==","shasum":"8755413135e3f57e28fcb6b4c893ce7bb363d735","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.288c33ec.0.tgz","fileCount":23,"unpackedSize":106944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgt90XCRA9TVsSAnZWagAAft8P/iDA3mHtwJ9tMt8VJREA\nKud5YdVfp0kl+czmezN7AZRPFUTPSCa/ZezlK/CyDuBZ0MK58FD4OQjLZ5eB\nka/TH2v49AmSEzTX1VfCS1g9NNx07KGbXLSGVl5fFMWNXxb3Ok5jyQiNc+vS\nrXaZ44ZF/Lp9Jy+eKwBAi+KOxAmjsnu1xRoVT9xU5PPN0otIQeEgwiHvt2nn\nq3xv1A8J7+kid2PoO8V60y8kD+J3wSiR3DIiT0JGMIqaY3+NDsKRps/3ImBe\nlhovQrchZyZfq7JVjx7o13P3gWvx+Jd763ttnyJh2lZvke/pBtFkv6U5z3kE\nudl8fUlkjFpoD0A4Za6TOauB3gEPOjgUp0y0lrMYwx0zW8/QhmrVCdaRvSUm\nseAvgeXxv1NgjwlH4bFMgwjvc5ULI/dWNzg4idES89h1qvRZz4HFmQd2zRh8\n/gpi8mAEHmvVa6zHHemHmegdCJnlKv0Fdo8dB3bGTGZ9zpGyHd+HfIZFOeI4\nmrD/hEMOStL9xl+PWFkyJYGrHSPDR3cn8vAbt2nsz/kkdA38sLs1ztu8Wwiu\nyTbjncuKJ9ymvkjrXGPoKM2RfG7+5XZbNubM24Z6hXQgE9NVxruioxy1r3Pb\nJbIqwk6OSr8Ph6oouDXu77iNo/Zfch3lkvGL3DK71JwLXfNozuxFBfpuGjKT\nS8Vo\r\n=Mwas\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+dOah/2F6ugIH8bxHaFG/TCcTXCKIFbURfYjUVo4r0AIhALFGeHPqakWNHCifjmI8kcmfc997i63+z3bGp10kP3Aj"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.288c33ec.0_1622662423670_0.5049177609542495"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7eb7ccb0.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.7eb7ccb0.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.474de7878.0","@material/menu-surface":"=12.0.0-canary.474de7878.0","@material/mwc-base":"0.22.0-canary.7eb7ccb0.0","@material/mwc-list":"0.22.0-canary.7eb7ccb0.0","@material/shape":"=12.0.0-canary.474de7878.0","@material/theme":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.474de7878.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"54dcd68c7454a24c791e5bc1bacb53ff095de147","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.7eb7ccb0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-PGjvtwA3JKBC+Bw2Hi6PmZ2VHIt9hTDmLjhJHEfqHpFvcBiFZmi+xd8YNHaEKOLyEbV+f7Mx2oTtr8M5nmHYag==","shasum":"060b5abb3684d5f30bc6e001fa503fa819cd7986","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.7eb7ccb0.0.tgz","fileCount":23,"unpackedSize":106944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguTPDCRA9TVsSAnZWagAAaSYP/jTZWAilRHE1M01Dblk0\na7t5Vm+cr8B5D1926EF9JVXWJGkxqcJTQ2tOQMam2krSLdEx7bp8dvTzOq70\nJr6DixqvARTYOEnFKOKJjqLDZTEFPizY0wg1J4te98wNJ//A8rarWk151rCg\nF8XMeHP5jihrWD334nvo6mugf6AgslsXsevOFT7X4c/HYxudQcf/bZbEUbZE\noBzAKO3DMGjoQrvFWBqNz/D1qmq3qrrVNYvMRcNtF1hj73cBAZxOEWwTAXfZ\n7+8PuUtPYRJUQrxjxYfiTU+SYZ4SGY8xZTOLWnyznC39QwSHnSWpSXCiizNU\nzcgQRkNuLrPdfTVIJnig6X/Rrl0/N42+RV+15pW8QWLNSoVRKk87x/pIw7Rf\n+YROvLaSci2ydQgscFw2SfYUo1j/xUdRbiR2Rcb0b1PuMtO9XJTzD/ORnHs1\nPbl7jLICv/d+QaeAVLqmhpigKkwhgkCfKPH0Nw7X4kJjygctJBbimJcKWZgr\n43W0j9eB2Zd65KXbnwh/7CGQcCW61S0rw7CAYgtca5aNZNe7DHDW6qI2sK0w\n8wcOcwina3d3DV5KWx3LhEB4fJr2gHajU6olZgndptXFx9ar1AYw7vGf7kWl\nSxYqHQT8CW2rwDY7RZTi5kx8RU+lc2BtpYkk1nPZghJhLn3BKzhgn65YuRZ7\nezs0\r\n=hz1o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC/R5kakT2KkEO1Gx5nEX1yOLkvQK6RAXko5Mm9m0T6IAiBNXSh7vKtgd1pbvpozRUKU/cmLCS5cqQiT8Lcpo3+zkw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.7eb7ccb0.0_1622750147053_0.7078646662145116"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7fcc0726.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.7fcc0726.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.474de7878.0","@material/menu-surface":"=12.0.0-canary.474de7878.0","@material/mwc-base":"0.22.0-canary.7fcc0726.0","@material/mwc-list":"0.22.0-canary.7fcc0726.0","@material/shape":"=12.0.0-canary.474de7878.0","@material/theme":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.474de7878.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"55ab1f053532307fcc5a331fdc4718c7d8e5d8dc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.7fcc0726.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-c4LDS+GWGhbI/soLzVwgSdhAWdR+OW974/Gke/LyU3Go8cbBxKiPZuqvcE50rT3znLzs3Kkg96p9TqLk7ZBjgw==","shasum":"580e3752629396171da83efb3909990900d9a9c5","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.7fcc0726.0.tgz","fileCount":23,"unpackedSize":106944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr3VCRA9TVsSAnZWagAAs0EP/1X7V0jVc/SU7WD2vWM9\nNUW+ug9vFL3ZiaBl6jLjWmKi7i/WC+fnW1y+MXfZ2jNYXNzo8N8Xo3I/b1rJ\nhOmn006s/GbyqmbM6FdopLxlwWGrij57nJEnSHgEqZpzD0UWbmez2KfFxGYS\nDgbLZUnBj+IwVn+DAcBZdrfAjpvxu8e/qUrBhcJFSccgmHJdK/4tp17+QFAk\nK3VvkGjbDfODRszUQ/bN1CTaGiB6jiurgxIl5b1bEB6gbOOcmiB6njyoPVZ1\ns/LyBN45/eByJ0iM4M10oR8taRRRdntk9f9gJJNNzMNB/76l0mmS9ny0+enA\nFgLEkmNf/YutKP/1mfCZZMQdIhdayxRL6xIFoaKhKyDF0vWwZMLeoBzehyF1\nk0R0qP+UycdXJFkA+eZYDp3+fNBy9dilfduooRrXZizJVD4FB4svOoYkmFVY\nFgKXGJnt+338W2e6h5nRAbn9jgdNeHLB7IV3HGR8ANJpyEAG8lnZqYOnimKt\n6tASHTd3evU8VbcfdXNiHDgbksTzhx1TwLOJezQK+AR40B4XMotK4KXBDTR9\nxfNhcqmpqpvauL4DtPIl802xR5q4LvHPaAVJ8SaIRtknENTkfOY/5PwLafNL\nUcWfbH8UGp12wc/NI5Ec5EHRrEczLna4bdsKiDrEedSn1VGq+itx5W2I7rdA\npVN1\r\n=8itP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZ6CHm0/CJE02qHg2eZZXaRo81kIOaPWoFAhHaTZOPdAIhAOdgt0i0x3GA7r/5wJ9MmaB1VlGwU+9JdeqUEz617bYK"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.7fcc0726.0_1623113173252_0.20836834096073953"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.220a4e5e.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.220a4e5e.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.474de7878.0","@material/menu-surface":"=12.0.0-canary.474de7878.0","@material/mwc-base":"0.22.0-canary.220a4e5e.0","@material/mwc-list":"0.22.0-canary.220a4e5e.0","@material/shape":"=12.0.0-canary.474de7878.0","@material/theme":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.474de7878.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"43930a9e907fac042066906c7c9c4a9bc26e3233","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.220a4e5e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-gI/hSzVXy9nQ1HCBlF0tQT6+Uk1vwbhh1s4K+TL1KJrBwvbm2qoYG+UoD6uoUJi4X0l2sSkC0bpvSKK8wejx+Q==","shasum":"e188cff99b44da19e80f2cd9fcc1018e7f235f70","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.220a4e5e.0.tgz","fileCount":23,"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv635CRA9TVsSAnZWagAAnBkP/0ukQpXT86cUCmz1EaEi\n/4MNIQppRWVaVUa1vN6x/uKxHGB7q0YuL9YijYZ7E8OucUx0b261X7CGVhgX\nzbEuC+/vwEdQXNh9LRUx37EqTqykAsfTTu5N8Wt/PP7XifYUNQOmtkWm3/QW\nXEJKteYcrKlQ4IYS1JY/WL3rrGD7sOkXaQfyzH1X7i9nKSdt8PlRpV3ok/Qa\nyKNTKI32k6K8Su+wU5E74APsd41NBHyySQlC46PyPtqgCPJFpKAaCxmynIc/\n5R+G7JgfzHmAyJlo8R5GiE8QEcVk7UDdKR7GoF0wEOKvwka66PH0q5EjIolF\n8aaZyUFKFr6396DdwDwCEnEq2wPDLgTHMsuNZCFW89s0URuhJr1U7iFExuhP\ngNI9HLy2HBcE0vZQb26IzZZ81KPeUr6SeFZohrc1rhNOButiH39owwfqkvey\nN13o6ECNvcZ7/hinHmAsaauJEjrgGzvjEt9OA+XMzPVg+BI8j3dbyuN1PpuZ\ncTOXFTW5fjxx1blePDpgal1mz9MceVLiD0/T4GTK6vuCj6WXaOWN9bxXjum7\nlpFUV/r66vFk5Q8QgC5EoC5mFNOo8NOKvmKHV/29lqlT4KQ8LtU3ZzCGTU3E\npMIyvOyPau7fbvLstdzWi1+t0K6SMpwd61b2NZP7G92caiPLYUzQDFJs+PjG\nB/NR\r\n=j1NW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGGqFyOI3NqmWPB4aKOqZeRfCdbrvECpL+jKeSmhPoBvAiB1kSiZLgFVkiTa2OJLEhkxSvPIzzlG50MEquulJslFTA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.220a4e5e.0_1623174649008_0.06441512099218083"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6b2d6ab0.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.6b2d6ab0.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.474de7878.0","@material/menu-surface":"=12.0.0-canary.474de7878.0","@material/mwc-base":"0.22.0-canary.6b2d6ab0.0","@material/mwc-list":"0.22.0-canary.6b2d6ab0.0","@material/shape":"=12.0.0-canary.474de7878.0","@material/theme":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.474de7878.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"b5388003b8ae379bc5c274e40db94c05a19d7ea1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.6b2d6ab0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ughoRovUA2g21qKHZc77yHrNb5ZjBGhiKPJqPOV6+eeeYuOHpXKWb1L4EF8oEl+YthAVyKefsGuYkJdJA4Q3Aw==","shasum":"84b8834f79539fc2685b35087bb27d9abe699e57","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.6b2d6ab0.0.tgz","fileCount":23,"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv7jfCRA9TVsSAnZWagAAs8UP+wY+yj+68GMvVe7mR+xk\nKPtr6OrfKWRnGr0qWAMQ43cFBL2/ThGNYtV+aZoAT636U2MGkPc8HsovpJT8\nVWUY50o4SkecbOXmstqgcxsn19UCcmQjFSmL23eg9jnUWbJjXlsr1ap5+aEx\nteUF6dpQfIINr+frMp7zPRyZjaqC2RxV5JPuX3i+JnI/WphORAe6G3ArUMNk\nZlotXeKmQtUI10WxPGu7PHjZyogoteeeKUT7OZGlXJ8/1REox6jAIvs502GU\nBxgR833mrZESbuLX2wMbnekLZS5JlnexEBcxUqLhXuVx+Lau5bsE7RNyy2O/\nVlAyfu0EyBBj+3CSBBhvyFw6pYlcNFn55cLkljohht1UTuTERwwzYWUp+7jt\n8OThDdyzSaf4KTaNmlpRhxFCB24PO/VJDOADmQorzrOHo9NWaiQQ9g7D2I0I\nrbL3aT6R+8j36jcTA9knfG1fVCXq4ZYdN0KwhhmIp9iOuSSq1waw0G0DZaS4\no2T6MVKyZSRAMqYSRNU7xtGilA3Cke5QIK3sTNRU2RRtUv07Hkp6fqm3Bsoh\ni2lToIS26i/khoe2cJuPALE7GCCNINph9kGnZhisGebS8IoiA3iN1cqasqQo\nQg05qsTz5suP6pdfzkvyGTU5WXJTWS0Qefk5AjtbPq/aqhrxYeJ/IYr7bDmU\nftyu\r\n=Q8mk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHVbohJ1MHXuYEIXcOLc+jed1sCMpy9SytkmUgRPY+DLAiA9o667vtr3ju0K3+PSZkpTXSRyNd8IMP5T2DSAdOGioA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.6b2d6ab0.0_1623177439086_0.32779127637740957"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2b20825e.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.2b20825e.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.8415ae585.0","@material/menu-surface":"=12.0.0-canary.8415ae585.0","@material/mwc-base":"0.22.0-canary.2b20825e.0","@material/mwc-list":"0.22.0-canary.2b20825e.0","@material/shape":"=12.0.0-canary.8415ae585.0","@material/theme":"=12.0.0-canary.8415ae585.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.8415ae585.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"8790f27506406085c946b5033334ea71328fcb6f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.2b20825e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YE5/AYpEmITrwPPguyBmrRrCGElBqlh21AgFxsAAJuEu//oGLhJ2/VAPNfrocejWEx4qdmRR3fGbKxmwV1w10w==","shasum":"6ab3cf723e99ab74eaec65ef1853241044d8d17c","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.2b20825e.0.tgz","fileCount":23,"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw/aUCRA9TVsSAnZWagAA3eIP/RTBdyM4LFsUkUTUpBE0\naPODeRL/CSDus9IDwxd+XQoFDgykhxmQCT4gJZbtkVFSHIx9pqdKZuYg4f6B\nQku4LJHLGnSrLvHQ44KzERcSI0cNDCFiLclJlpkPNzeYeh/goJ1Cd3Y8uacB\n8st4CF5f1X3EaYCDtdxHs8FVt9Xodmkmj2bDbtiwGgnqu6xuUYOTWKv6Ulow\nO2h6lwn4gMNz1BXWRX+DlrGb98H/14/QL2cNq3QvSX3fie3nde5f9wbC2lLY\nPf6J0aIDaeFQHwLPeTMZyC69doKdCgSoZ5EJX9rNLUfKULxYCJAeZ5dCGfip\ntQNg1JYqaIX7PGB5WNuP88FYEO9ke7JHXeaPpYJF05Iq5mBk0eNJ4nLYx6sh\nsUHXSvsA2elUHoG7JtCjoC4fHJ9yy5lpcYoYUKAuPtT03FZMCnxkg9y3syH2\nZYG4VvCyo9zaWEUOXkEKu/UCLXCTaiPgR1z8AlmparhL0dHH4/wMw7ylkHNb\nqrTIwpNUY2rSFONo/X1NpG/IFW4ufsa6HnKwdzcrrUUncJ/fUgK+8XE3XkAq\ntkZGTunq981UbbwdcU+9MIE0CTJQBDpKXporzDVWHUN3H1y+ELq9hu6T/n2H\n2kIzWh3bL5HFCxWrJwBkMIfZPrYJHhYZ05/ReNkA3QeR+yMjbKbNtmQhr9v8\nhT23\r\n=9wNx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0EHuIXlnC9GOzXzN1aY/oOhG+XaByPXjoAmkNvHs3QAIgbLxEvgo34fMv1iLDpWKtnctElGiO/6HcmA0sZOCjP/8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.2b20825e.0_1623455380050_0.19815159655908676"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e1511867.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.e1511867.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.8415ae585.0","@material/menu-surface":"=12.0.0-canary.8415ae585.0","@material/mwc-base":"0.22.0-canary.e1511867.0","@material/mwc-list":"0.22.0-canary.e1511867.0","@material/shape":"=12.0.0-canary.8415ae585.0","@material/theme":"=12.0.0-canary.8415ae585.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.8415ae585.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"37d9e0b693215142b4667122baccbb1b6fc9f835","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.e1511867.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Uhe4S/RSnozK3Y9PcK++QmxAW6MsJMDMG878p95Nqlm4//xLxT0HzHAYcQOdhbSNjR31QxHCo0lu/pUXSqI2mg==","shasum":"77cf61aeb438c6208262c301217e2c49bf4c293f","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.e1511867.0.tgz","fileCount":23,"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgxAaVCRA9TVsSAnZWagAAoQkP/0fwbr1QT0nYY4ooDjwg\nNgeeD5xMV56EvjV1+sAAa44xnq59r1+D6N9XKD3qnIwFzsA38mwPeDTLuXln\n5I4bH7FEJujsRWv0Rzjk2cs+H+JQz7a1uPt8Pm4ebKVeOgwmT9+SmlQkYk5/\nNENXNgFYErKTGWccd3/n7MKg7QoTB31ok2FCE1edJ/EZ9NUdSAEE/D8eaMXn\nfe3ahR5AuYsaqYmVKpyIBmwnUtMD57La0JyyFfbfttcNkoHmNQ3yUbI2/+xZ\nHS1xVYvhRID43ZnZhSR2oU+J3x4JR7eAsYaIFaLlgU91Mym1A8LG+1kX7/c6\nUQGLuiRvS5RWeEK/sum5bMdgHi+dKIHv3YRYaMSubOL8Il2fRDL5M3QwR4yC\njmu7eY6MBtoS5ItRX4yhPNy/X+S7Zy/ipSrBlJqfAtLAR8DcC2WAXieITFCB\nwGWt3+U4vhAB97/qyTfQ/WGBneak9Q42eIPt2GaLQqA1DgeY/Wn8lnAgKjKO\nLv2ShqUZjEyBBdB8bsvgrrXfXdH4qTpAngvMhFAcQHBOe4OX5BbJsxd5qGFQ\nUnNG0XihwEEKZgyCObJ2jOv+vdguBmO37iksyi3JHAXo9IJcPC3LoJvGzB7X\n052Dapx7NMsgGdXcnJQuvjHXm6nuUK0FpxfATjk7jExW5qbxH6BcUTnTG8F5\nYTw2\r\n=tdJv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIENOoljJ1rEoCOUhwsdYCSZnqONnW5lAXiT/CWCQPBjXAiEApEmNqPavrExmrGdZSrotGbUrmjlFQAQp2M3EG5hUbD8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.e1511867.0_1623459477058_0.8456504645948459"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ef4a0c0d.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.ef4a0c0d.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.8415ae585.0","@material/menu-surface":"=12.0.0-canary.8415ae585.0","@material/mwc-base":"0.22.0-canary.ef4a0c0d.0","@material/mwc-list":"0.22.0-canary.ef4a0c0d.0","@material/shape":"=12.0.0-canary.8415ae585.0","@material/theme":"=12.0.0-canary.8415ae585.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.8415ae585.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.ef4a0c0d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3RwcOLYBfN+Nu/bnw9Mx1fgc9hLe3w3s0gE2VT3xOPQdauiSqiqtlqSmNGlcuGsUojWq60kht93VhteIWgY5Yg==","shasum":"d8afc2cb72cc0aba6d7f96ceb6a36326084deb3e","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.ef4a0c0d.0.tgz","fileCount":23,"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyQUCCRA9TVsSAnZWagAA3UkP/RRSPXs1PFQawShVeKCv\nGbtuW/Y+qpiQnRDboSv+FLbLHAsRyVeqj/G0dt9sXsLw5clvTnEVANDEuZDN\nbf50Dbpivzu8j1jjX2u+XG3dFU1qBfGq9YV6SehKXERbeoH4S0z0/PVBF/uw\nbqYY9N63RvHasSq+TgwqVBE+LnS9ObXQRszwr7rKpCJ8gjf6GHnnCAfy+2Aw\n53tK5hpALaOXdR5VYNs8gLrLPBSZhkyzjdZ7Ge5FRFoB0qlWEvmjiKJ354WR\nyTzDNxq50NiA8T8RjFjSZtwhUK0G5e0hjbvkN9m9sUSfxhzVPxhrOngKdRnU\nM4mck58p8YEvmEP8/yA7ZtFnesaSEr67g5Vs8d6HzEFeX5oYkfaHKM7/Qu5E\ntEf+ZTlpTBoTj9S6LEaVMFjVg19P9nUII3dAVY8FsbOLzgk914mmQYtiXtR9\n4/4gYdYBU8hi9D5xLdC0AAjTyFSIVNWH2eB2XF2DLnECG3LIBUDtrumoYi0P\nvgU0u45vYqnPQwcIjqQzWogCoMBRrkE/lrwFvWaNhtMJfJDgiBfE0gq94WBB\niFkzQiRr4F4//iPhOg6Ppm0ztR1PZFLUDZ7P/tIzrgN4ohcfW02G4KADG0Hm\nq7bbvMBQDQxgDVlpn80o9CbzM1AQj2TpqouvZsvE5oVwJnxIhatcI9i2pVL7\nP0IO\r\n=1mtO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICpG4TtdFF8r+7Py1Rj80Rj8X9CloOv9q+R1nNRVLM49AiEAvFAmYE09a5dDEfEk2amL9BK56OSFT4qBgPVuLsf9EZY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.ef4a0c0d.0_1623786754267_0.864194616465489"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.573d8913.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.573d8913.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.f705e8048.0","@material/menu-surface":"=12.0.0-canary.f705e8048.0","@material/mwc-base":"0.22.0-canary.573d8913.0","@material/mwc-list":"0.22.0-canary.573d8913.0","@material/shape":"=12.0.0-canary.f705e8048.0","@material/theme":"=12.0.0-canary.f705e8048.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.f705e8048.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"13a9b9717491f67b5f5a219b279328890c0c951b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.573d8913.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-K4ivFITpFMam1oFCOj7J/jPRGM4nZXVZYf3TwPv0pLmy1SwK7PgIrQRnbhor7XvTF7fVX4QAWGOHigK3AIkvDA==","shasum":"3204dca72a7a5e7e8645e4407081330b56154ad0","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.573d8913.0.tgz","fileCount":23,"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzSveCRA9TVsSAnZWagAAossP/3wJlQMNngrSyxb2OHiK\nyZxDDD8GIzdkQSD/wKuBwLgJMRBoJsSZf1YOQCl0BxBOjWZfGFKJeIyjM6w7\noFGksl256D6uv6Q2NE3wmOI0V9Xh1E5H8l3g/LMFRGoZAwgGqFUlP8T0wBe1\ny9wShi6qFMCbhcXOQ3KMysu1aYm3xnXSIKGDBm0O0iuvWSDRRBH2XhMDq/7p\n+Ycct3g92vev3jIsQuagWZjnCySQUtl+Vvu8Bxn05NvSLbl3GoWwuAVMZ1ln\new26gC0JDYmYDeeARoMtXxWmrPv4FukUpsxDRUrsTh+VeSWqMpmjResKddwt\nOU8yEk+FBt8HorhetQI56ZPG8819AfvZY7uj2BjBu8ViI4Lk1UiIghEAF0e/\nDkfM06ImsGNt04kkWaFFVwwWx/z2H7lT6LAasv1e+g6rGQFPI/y0/Nig3c9S\nwuQztAgtQgrQU+e+beivlt3TnOkr1WAGjtZuSfC05NBlvsTttjwh/DiKQR6n\nouDQ0Ju/fKtQT5SsTuaj4HlkNSpKQV9IrzIN/s3vJlVCo9yWha9CxS8SoL9q\nDAxjDywm76L6ds8/nRg9KLEypTf7tlPwZxu7vkAicx7ybVdJ2tCZ5KSSFI0I\nKtqj+QKnyDdSB0lUwlpaMtF8gA7xhvWqse0Kg3wWaLWtmqqBS1raUxa1JX2t\nQout\r\n=TIFG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQA9ZcTFREccTidUffGSS/f2qrzdTq01LmAOdNH1rUpgIhAKa8RN+Djab07Gx39K3vzBPzcOGyK9bl7GZdXab6eDgh"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.573d8913.0_1624058846415_0.8076011089863151"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.21dba001.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.21dba001.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.f705e8048.0","@material/menu-surface":"=12.0.0-canary.f705e8048.0","@material/mwc-base":"0.22.0-canary.21dba001.0","@material/mwc-list":"0.22.0-canary.21dba001.0","@material/shape":"=12.0.0-canary.f705e8048.0","@material/theme":"=12.0.0-canary.f705e8048.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.f705e8048.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"f26ab3eb589dc34a464186e9b323c9a9bd20fade","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.21dba001.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-SMX9xNda/nRxEctwyeLxX1NXgOdXpx0VVcL1co/nJNzCaTpvnGkYM0HpHdb9C5PPLAITlrb5HJ7/rLOD28M5rw==","shasum":"dcdce3706742d9561bd4e2612924969e46bdb2a7","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.21dba001.0.tgz","fileCount":23,"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0Qd8CRA9TVsSAnZWagAAzHcP/2Pt0MbqdY2ZiFGx74Sa\nqZ83MfJYwpODpG+33Zcik2xYRrv28ljdWvyzE+qNA45BVUh0+liQN1SJfMCo\nzM5siTanjuKxlrbGGh6UvVuHuMzSM46tQ2uiMxKEDOf/q2k4Qjz3UzuJgTPs\nYFw8vViP6zgrsKO3pNGBKACuTwlx4NPZ/9k9FfSnP4rx4OBEe3qPdRoYRgnJ\nw02NwpX+0V72dqKfq1L+gRg5cNjVtU3+E9+x1JdY67d9dOHTqt5YAa3lJiOZ\n8lFkRsHEzZpm9YwfdOUa8TTwx9hfa6aWFGeODZTkPdwI88o+SpNt5uXKlfuD\nR20p67lSFYOjGT4gZMWJg7HmAikVWcnDD3e0wjOY++y7REMAw5K8Cwm4wCTn\nHIxVMNlb6LYOCzJeZtNW3L4aqOSY3xALWrppJzyF3+hXrEwPTHmX8DVR5xQF\nySknFOez1k9jENpdB0qI0S6ti2pTDlBiWuCqTHoye3KnKkFVgjglbCvppYvm\no0g1vH44muwv59upeSi+3JnKDnNnK2annWuV+IYKj+QBDBnIBh4OjuVONe+3\n5iqeMiGRQIUmEeP8MChcMF4nBpFukaIqjcbv4IMFV7nIpfZntyaxKpaH9j0Q\ngR6ElAp3IV8zBh6OLsxY7ruq0Q3SfjRElYhbHHFXW+Q/grsw2fSBwUqSJo1O\n/zud\r\n=y68j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC+0OEZoTG56zgyPme6JCFJ7l6VKlmw7L5RrXprBS+wJAiEAzM5Bk6XF2dnL3FdubyxK/3ZGg0dQRsJpCPXQCUjK7bk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.21dba001.0_1624311676497_0.6565024054253188"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f5bfd0f.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.6f5bfd0f.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.4ccd39bdd.0","@material/menu-surface":"=12.0.0-canary.4ccd39bdd.0","@material/mwc-base":"0.22.0-canary.6f5bfd0f.0","@material/mwc-list":"0.22.0-canary.6f5bfd0f.0","@material/shape":"=12.0.0-canary.4ccd39bdd.0","@material/theme":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.4ccd39bdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"38e391cc489598145e8956cdbc0a234563260efe","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.6f5bfd0f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8z3QfhE1BzQfBFwofP8mYRBio6qtOpC4Ios3o5LH/yap5LRDrS9ZJK6biymtAE5yUjbgiBGMU61fxqQ3kz78KQ==","shasum":"28f74065d3e2b4bef31219a78efdfeafacf01801","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.6f5bfd0f.0.tgz","fileCount":23,"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1Q2sCRA9TVsSAnZWagAAHN0P/1MBJ0Gjm2uWL88cswak\ndXDGQP+ShAUUAd7JDkitsG7NqXin0IOU5bfVOIKzh7yJwW6UnsgWuOBHoJwD\nPLZ7XCRF5tlbSWVhWbZ4BJUwvn2LohK7igGvxY4HDzw3/t/Jnp4EFl5bVHn9\nB0vJOft4xNRBK/X1k6bXkQa6OGAXysik1fQWt8a1o6FoLZJyx4ZJPxIN7HjZ\nGZY1J5/BCEWtyqTE+pM3lSp+pB2dlT9tK6tIKjZUO2Q7n5WV1MF241NbBkSz\nAxdO6yOSZbZvG2onEHujB51rlAeHdV3Rkz1VYOGI3OYXVuRzscGrb1lh0weI\n31wGwExU5WPanKhKCStL+z/weoWgqs3VDA4Z4C9o+jPQM6Qg4EUdJLRSqzvK\nbuuPyrniEyseRT9+RHkH4U8ZJuGA2HdaChquccTga+Aw96ByM/Hp0FUIUoIs\nSNquZDdOp/K8NzOL5yUzv0s50Ttqe3SULQfSZw7YqHl5eSSF2xnQd4KZZExh\nZyjYaBgW/FcR+zyxkb2kf7xOxktoWhUSpwLQGzxXy5utgIcBMIrPEMzPeowP\nLXJOBffE/AEuy/gNM8KqcXGJxrqb8/bcPIyg+GmtCjwbe1XHLs+YqkV1Kjmz\nvwo+xI30atqI7i2r3J4IeBp5Q9WsV7AxVY/zqYWuE6cmoUqoV8rbXMgCTP5+\n4zK/\r\n=ntfH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXM3Esbw97ZwbpMoSWUsF7+9iHJCEjza6IwQwFTRVBsQIhAPcOiK7rYgJEM7UAIxOIMLTwiyR/5E4z3bGnVp6XYmX0"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.6f5bfd0f.0_1624575404173_0.7654917282516385"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.fd8360b4.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.fd8360b4.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.4ccd39bdd.0","@material/menu-surface":"=12.0.0-canary.4ccd39bdd.0","@material/mwc-base":"0.22.0-canary.fd8360b4.0","@material/mwc-list":"0.22.0-canary.fd8360b4.0","@material/shape":"=12.0.0-canary.4ccd39bdd.0","@material/theme":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.4ccd39bdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"652b3840a450a965d0a571d3b055195dddebc8ca","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.fd8360b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tphK1R+8svj/IGFnX84ZgGYdCAhyBPKWgT7rBpufXlF/mzMJGPmRfTz8xPLAB7WBiFG5QEAk9JkA8FZBke8fyQ==","shasum":"30159b2017dd3cd58b4e6be12a736efa700f6635","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.fd8360b4.0.tgz","fileCount":23,"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1in8CRA9TVsSAnZWagAAzc4P/0D72bQOfTCeeYCQCeYf\nNrddoswXjLu0YwmzjcZDgwsrHgfVP0CrCOjqigJaZma+pA0y86n5jyZ91rlx\nN0cmqy+OUoXTawglRHikjqWNgWjb5mbYdJWzoHuOnujhK/k1S09U4glXcs6V\nGDZFXUMGacMX6rELVD6D+uhYpL/KM3jCMKTIO8CZ/u/ZNbBEXXQC0tj6ZJBM\nSGGNvBq/TTiM1zYyuVgeOYP6GL7emTOteovUfkDZ6r2tPE0971zTTtaFJSV9\nSLeuXaoM27GTeSvuQ/VjQdUVIYUPVyoIb0YTgANb8v791CJnpITAGvgK6gWw\nMjcYgv8573I9gQV8FSSM40sWyuL6smG7lAw80uIUHe0Vxv4a4O9MkUpCEO9Q\nOlVQ/fH/LjxZlGI+bV/b9BeAK0R9AADXOygrzjj5M1aOGMVKRXRspPixik07\n6bo3MuDjZJrZkHGVqVEFc9VyWBUGbQB58UOZJfbNexfr0HxJlOf7XiA/ycAB\npfgG4P7hUH1WZLfC1c4jEjIX1vfsrpziyLkRMUWEIUr1/PGTOLDM+bTVXI2T\nhyi3eeEqkhUZaoni2gc9v0/JjlkHVnXrKBJxQ/4SpQaJPyJCnZ6oBOR6XKVC\nSKlZJ2fAvk2U0gqFcexBJQ5n/mT5+e5P/KsGt21uZhFwyI6FRqS/9A6/xjdT\n3X6n\r\n=La8Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCImGDtaidM1b762CrNklUdzyNRQLFaVSYnqdd/BiNEEwIgYUuSM8YBhwb2I/4umUgtrrJBn9LXfst9feueIQlbofY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.fd8360b4.0_1624648188480_0.5467882186800099"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f74432f.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.6f74432f.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.4ccd39bdd.0","@material/menu-surface":"=12.0.0-canary.4ccd39bdd.0","@material/mwc-base":"0.22.0-canary.6f74432f.0","@material/mwc-list":"0.22.0-canary.6f74432f.0","@material/shape":"=12.0.0-canary.4ccd39bdd.0","@material/theme":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.4ccd39bdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"c9a217708497c2e16eaef6de3d1cd70873d0173f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.6f74432f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3mrJyumwWann8vZWTfYz6QMIhnyvRAT7lfuoR3ksj1fGoN2DRV95g6pgGmVd2OycfI0+h04HPECTE+RDCr47Ig==","shasum":"03585adeb086fa7465cce59542eb0d5b66aa3dec","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.6f74432f.0.tgz","fileCount":23,"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1kDtCRA9TVsSAnZWagAAhtQP/2K8yAczn0TApkY4JPlb\nhsmD8e1eYRbdY3DxYrAS0cdDg926gqrxNqG/DaZLvPrnrj2ZsoxrZjezcGc8\n7zZEz+qWYvAkKOf8AtMSLsw5JvW2i91A9WnpGoJJ7aNB1vSJRPObKU6I4Qyq\nl/IQ7MDTMDWMI5eeNoP2/bpRqClQaXbYzTTwtoRvmyQMVi/uhBXkx7h+Wlh2\n486LRjjhQzhNCfDCfYgH+cM9f1RWRjzgLIFbH6S7xgyJVhTTY8JTrY/TTMtf\nxD53AB/KRLN8NwAGlSIA/TvfJchhpThPPBPHm1t0ZYtbMeZZYcpT2iaAhIha\nnrd95B9PfPvJjN/mmqbikuJ8O6uDBNs2szAtnATdD8Q9E8dlP2KL/RO8wgjv\n2/6z3gpjywswm6m/9VycrjncSxeglLCETcrp//3QQu/d39sEVHJLMOD0Hre+\n/0Jd/wTBTHuIzTKvmUx6o4QkPt2DzKi4Zv4AVlHTncOt+QGGYG4fh/AaMlai\n4/eN5GsnW0g6AWa7gBl8aSVTLoR8n3sVK232m7GWJ8ItnC8jK8OI8pi/fZ6Y\nvT23TuqCznVkZGqfWm9vmGEt7S04d2kKakwEe11bKMMj8h9SRF9q1K0baAaN\nkxigyTYei23BshN26aVzBnzlltnVopTYwGBSzGNGXji2Ydl28P7/vCQhfm6e\nNfxk\r\n=hxXo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCyyjOl35VGaRrSFYLQWvNQiDTE3uHb9wHODaOm1HeAKAIgKe6COv7PLfRejPw43iQI3hhcz68+6/UcedtR93w6+K8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.6f74432f.0_1624654060554_0.3886042928364979"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b62f901d.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.b62f901d.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.4ccd39bdd.0","@material/menu-surface":"=12.0.0-canary.4ccd39bdd.0","@material/mwc-base":"0.22.0-canary.b62f901d.0","@material/mwc-list":"0.22.0-canary.b62f901d.0","@material/shape":"=12.0.0-canary.4ccd39bdd.0","@material/theme":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.4ccd39bdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"05d3042d6ee960a41512f4385bd22af7dad2331f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.b62f901d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5v2CwBug+PhgHbfokMAAyUpvvW0+y+NzvnxBIjpxFsbHyiaUEbqTcLcPNSoJvj/0Byr0RFaPdI0t9iQj6lM/qg==","shasum":"9b2c44259e75ae0f58fbb95390ad943259644fda","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.b62f901d.0.tgz","fileCount":23,"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1lYWCRA9TVsSAnZWagAA2oEP/1A8FRTcY81E8V2YEkWu\nJyqsVH9bbr69JhI6dnPJaup3apwpEx46rcj66eXrMFhkAGk+ikpknJYg/2l4\n7lx4KbH1ll/UtzoBVDl+3Vs334E17hTmFciiUUfzM/8hcPfSd52hMY8MQ7d/\ncpeFb48zTIMKXrv6qL037N52CC358lrZ0TlK2/5W+mVQxeoTjfuByM4jeuck\nj+SeOxuyHHKJzq6GjBk+NkOYiTedThawn4SBc4yB8jgggx4zUzuM6EbsOPXL\nEDlw1ez8mAOu1ey/md8E2LPWB1mnYhTe0J7vNEa/GiAZAeV6kLUQeqps8dps\ngt8c3Nb2fgHOWMqoVyIqRF+h2D58byjwosupQHhKMb4OIHy01ZEmRN10g47t\nk6h5L10enEKds+n5HH6fsoTdgSIx27YnS8tN360tCYwyLBaf2MLyXk/Xvht2\n1Zc99W2yPnflx9LnusKiAXeLADxAv36xUC4kEGjDs4hLnmFj5afqtDlgX63K\n3k6QqRonJoeKMqcjHqFU3iJjYwuA8OcBKUCXijl9HxEB/dZs8Fvmtdlpy0gN\nnL78AC8T3YtA75d/OIoe4rTEkPO6HChBIh5rXbh2z33c9My9+tOlC5Q7vteR\nMZSfqjFsqEPX7kZzBAJGZ0uFjwWO1dEOm2T1ypR56M56PhsWEuhPlDeajsBB\nHaKW\r\n=kOmX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSHqByAK4Ju6DALvCEDvrrgje5oSdLqKacyl5Gk8Th1gIgcr8+ZaBRW7721/hKPWGWUJOYW+DhlTz8APSsvDWxr2s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.b62f901d.0_1624659477690_0.684980968671091"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.73122cba.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.73122cba.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.4c80072fd.0","@material/menu-surface":"=12.0.0-canary.4c80072fd.0","@material/mwc-base":"0.22.0-canary.73122cba.0","@material/mwc-list":"0.22.0-canary.73122cba.0","@material/shape":"=12.0.0-canary.4c80072fd.0","@material/theme":"=12.0.0-canary.4c80072fd.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.4c80072fd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.73122cba.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-CbEV9CuTbdADPtihuNGGYufNGqiJFcZdVJ5C7WTUFB5weNkdVBnVYkr1xZeL/+gFIVDDRxNbzUpm9lDOC9U1vw==","shasum":"3255e2309dce19567877f91607f88e59a92f80a3","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.73122cba.0.tgz","fileCount":23,"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3Mf6CRA9TVsSAnZWagAAmogP/Ai67/Dy9NsOWkCuncEm\nMOn2rKQNU+iwSpXTnKrZk2GAiQ0atsH6vPevsSzAyMDDbEAxaPXRkT3xjxM5\nrOVkL4xqO60yiNHT/5+rgrowVxNl4dg3p2Qa7x2GxVfrpow+zTVdtJEZcCzJ\nDm+aMJZWTmXdMlYh4XJzGbktEPBFcZmNb54hU/1z5kcQy9bejEbW8YivgdMI\n36KaJmBEAXnAIKhatHwEmDcKpdtzcSeBdBXp+20armsQcZmZeGpv2TDLZa08\nNK34cs2sWjo4FsYcd1xoTqumupmcykqw0Mq1cmJIk86rQQSMVuaCVVnam5Ba\nEeMaBHaT5voo1TOwoeMBHb1zcJdPA8U1ht0z+jNMTvu2F/zxFzN0KVgOJE8r\n99pBrWouSHZ/R1R5bsp+PunSBYBcJvZKQjOn0jmWMmjtFnF1DnEZh4+NWe7L\nOpkeCtD/5HWGuaBtb0V0g3wmrDdDIyvwZqNoXj5QfI+K8GGOVLLcI9tBfzfM\nWfh2voDhsIswPCt8FBghE5avFSuA3KsJ9ecFs9+lKCFFlzhRkref49eyiyEq\nYVeWqFz2Su7AaIQp7xsLI+yhPmdrp3iyWr5My1MUbUdjeUSBEMNCJukcIp9L\nWlARlXFado/YTmnZHWnfi7S/BFvoRi5S6h/oF6UhTGc2bJSeT46ojPGLLkPm\nsa/G\r\n=AVYE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEVx/CeBCQ8CrbHYxMq3yHMOqetIhspc6FuDnPNkXghXAiBlafAd21SlD/91bcxvtIG5mOdQRB0FNwPqIDv9gUgnJQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.73122cba.0_1625081849636_0.3702965847813182"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a6912af5.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.a6912af5.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.4c80072fd.0","@material/menu-surface":"=12.0.0-canary.4c80072fd.0","@material/mwc-base":"0.22.0-canary.a6912af5.0","@material/mwc-list":"0.22.0-canary.a6912af5.0","@material/shape":"=12.0.0-canary.4c80072fd.0","@material/theme":"=12.0.0-canary.4c80072fd.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.4c80072fd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"b34c74a66bc7e54e1165edb13005a2923702f9e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.a6912af5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-X0bxKEfwHVbxAtlrH8dkgDMLSWzccnIWjNAvyzzl02lKcPRv7U7J4SnSumLrXCozGa07uUkZUC9nXZlEAsXoog==","shasum":"6997d7cbd41a09274bbfe9326c8512bed1219b74","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.a6912af5.0.tgz","fileCount":23,"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3jT0CRA9TVsSAnZWagAAKUMP/08inSiVMGtp1M7pPB3k\nu3j8aHWxkpQdZ/bfbhTstFuKEsqUp0c6p2J7AlBfrYohYHTmA425yFJeavrt\nkEAXq7Sj4nfB7YMOIZTGWQyLf44IG9V3Zjez+kGw+/e9tLLbfGXsi/FsSTFM\nu52pyb+vjfUgFlILuu33hGj65VLyr9SRbz1xhqd69PCMSQK9SQVwjVhauH70\niR/cV2JGJDDr/HuxGsYzE5+9CJ0tNdJbsbicu095NE0/r7riSqTeWLNqP59h\n4LJa8wTPd24AywvdtZDsWjhluHgHVrPJR2Qdo0alKm95FSBbR+X5sg0cAsZQ\nJTBoHCRPRm2za4SwnuI3FHyo7lkHoe/s18PQsJbm63O65GxLGjeVNz6dZqYS\nbbVtbry1n3whsXhgsonmdxKd5NUZF1FYKh+TTWj/wXM15juxAgcKyjqv3OaL\noHTv2DRAVFvbixiEZUT3MCZFw8IjGfJ0B6XzyNHFkJGAivGDMcmkG9cvErx3\ne676FjMDTAhDULZtTo2/crlWWTabK6nr3Hd38Ih/7iNC6ZlK6bFyiR/rJfCN\nKKElp8AsEEEKQdT9kkH/rKzhPgko1l8qtYZzfqVFP8mxmIuR5+3T+Ttl8Bn6\nlfIBPRg9jowAbRGYHWYpOyPq+H7SiHPRz62IYJka2DCrs1hvGe8JA/mAQCTS\nHEp1\r\n=+gdk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHpnkaRDr+MXpX1V519oc71eT3W2CWFMuhjKObH3CjNYAiBTHiOIhpauFmDUlSt6uh5vw4vBdqJ+UO5cGLOTeR115A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.a6912af5.0_1625175284269_0.0933072887250539"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.134f24bf.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.134f24bf.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.4c80072fd.0","@material/menu-surface":"=12.0.0-canary.4c80072fd.0","@material/mwc-base":"0.22.0-canary.134f24bf.0","@material/mwc-list":"0.22.0-canary.134f24bf.0","@material/shape":"=12.0.0-canary.4c80072fd.0","@material/theme":"=12.0.0-canary.4c80072fd.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.4c80072fd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"1191b29dc7fa661811a1c3960131fce8394fc84e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.134f24bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-lDdUmcoXSsyI67iXku8u0Ln6d1XwsDNlG2F/SimPk76+EfoKQ9bSRcC8lYGVgO3VKjRWOnIHkNc04r+2RncawQ==","shasum":"2b35f3ae29efb5e9d09a3e5a77bdeb5a5a255d32","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.134f24bf.0.tgz","fileCount":23,"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3kKfCRA9TVsSAnZWagAAVd0P/iO1IHFslhpfrvD6ncuC\n6l12tW/2Q3lmuzyyEyfD1JhxtUoU25UEtwh3PwlreMmpQrKnucdAQNYKBGCS\n6qKnwI/6pjsm8yBXxz20Uf5WP/hGjuxRR2PeB34XkLF7Maju1D1D7US7aImr\nmIrXcWA/NYjoC3m0ReyvSc7ZBCG8yU+AFSemIk5X0q1iV97D9yoTZgXOjHTB\noLiUd2gbo7shyyrCe0ugyHIHC3TUuMGNl5bIreLn2qT0jDZP2bIgJlIJ3fD6\nyM0YfaEmQaxr6+qNiAvwAH0JfyhK70VZGyhC3fS1Cf4stHmCmClB0EkbdYgq\nfHy3f2jKY+hpkkJ+kwQg5z9e49fngdAIingo2XW+8t+CM4nvO54LdAqvoick\nGfws03JzQ7sr5gyRs/K9KEWrBeH9PJC6849IABQMO40LjCKkL1V7VkoMB6vj\nOMFtfJ9UXWvFiC3VQL3aecLTBwSWFbTzlfSiDlWdzSHuHGNecyC12N0R4DFF\nxkoWGSlJTuZYN99QzBpssJuximBlGxAWT3XPQ8vTOG/0tChSLZ8juGQAYtzF\nQUTOsCDhisZQI3wq1KQLW5yskYjAOQ3tuhsA8JXGQBx7709mqpdNM4x2lc8E\ng7DYe8Lp5wk6wWeooPHX9UvKJRJUHbT2P8TX5KYF77c4LJQtkDkr8ZnPH83l\nF7g1\r\n=0PcX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGchvxdARvXu6cSUXjm517IQd717B5oG2OfLLWxeKYFwIgK0cJPdVc3onnf5rGmC7Sm8toculDOpfywWNTcXG9kRQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.134f24bf.0_1625178783262_0.14820974700609701"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1debb78f.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.1debb78f.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.d0f9f3f2e.0","@material/menu-surface":"=12.0.0-canary.d0f9f3f2e.0","@material/mwc-base":"0.22.0-canary.1debb78f.0","@material/mwc-list":"0.22.0-canary.1debb78f.0","@material/shape":"=12.0.0-canary.d0f9f3f2e.0","@material/theme":"=12.0.0-canary.d0f9f3f2e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.d0f9f3f2e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"05e5511ca831a84c47e7bd43f685202e9213b33e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.1debb78f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-6xLgYd1lkOlgARCuU1V85sSbKD00EqUXATWNhVWx0rBXbGOSIcoTllSX4dLTXPmXg3D95ByIgAsZ3HAMk9VpDQ==","shasum":"5c0430a6ba63ce620a89f44f046b996db173c10b","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.1debb78f.0.tgz","fileCount":23,"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5PmLCRA9TVsSAnZWagAAAgYQAJxPsH9fRtiwc7nk0y/9\ngRF3gm1K6lh8y5tIAYsoIkzQ/bqtoJGriKfacF0hEtZwcBsS2qzkBD3vASTA\nmhHBWIvAMQDUCtKln4WPxsMtzb9S3e2HxmdBICC02Qra5r8pXfOoLeqrVrbg\nMBH6vk00QoQL2LN5bTOs+Ceaxybcf/6wXQLGcJ5QmloipB3Yzw2nxnUBOX7T\nhwoIhzQJMf15bgPD4Y0LFlEC7W3zFGOCGJPLtXEIAhblghSY6fg1IkOwOCEc\njckyyEv7hd6fp/Dta01iEfiu+53EuddOFoBm6wn6BkTHEC8JNJ6Avy8PWDNm\nd/DcEPk4YfdQp5Esu0qX5L3kB0VqYsPm8KPKmMLfGoP8d7VppDUtOkvBuhAL\nz217OIL2hVHcpVP88jk3GlSR+CZmbOsOl532MKXgr+LwdNaIKWdDz9XLclWj\ngtnHXCICURtawmWoq7trCjgRYv6IB0WIIsdwtr0jdT24/WMlvG0l7k/PvrO7\nUEbRu4WidssyU0qoUnu8I05CcOdc6bu09op5IA8RICP4u6iOwiQFpO4yBnEF\n4R/Y5K/5ELDTmieS5u/vfslvwlncNkDD35WoCx4RGhioUh1cAif0gYpBv9ZB\nFYveh/29kB3EVMbHVYYDpdN6eM2xmAPdsaFYXBIg7VhZt46UvD84bH8GCH3o\n3v1Q\r\n=wCt7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClIOh4ZU0TtCgEfL/hy1N/uHajBd76YKnVziz3Virz7QIhAOn/As938pQ5ThT7VrDNtnI426bOgesyh1iqUFJdSTnU"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.1debb78f.0_1625618826978_0.2241036922165598"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d53edeb6.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.d53edeb6.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.d0f9f3f2e.0","@material/menu-surface":"=12.0.0-canary.d0f9f3f2e.0","@material/mwc-base":"0.22.0-canary.d53edeb6.0","@material/mwc-list":"0.22.0-canary.d53edeb6.0","@material/shape":"=12.0.0-canary.d0f9f3f2e.0","@material/theme":"=12.0.0-canary.d0f9f3f2e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.d0f9f3f2e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"becc7820ecd046cb48666a32a633b8d9f76f2980","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.d53edeb6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-giuhLFubqx1wPtaJJsnJmyT9Q4ItdeIslOAzyYnLe8339sK13gMsSZRjjhQ3m7zXfpWijSkw9TgcaH0M8N/hcA==","shasum":"0c25f42f45f6f2d14d36941a9d32bbda3d826977","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.d53edeb6.0.tgz","fileCount":23,"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5d3KCRA9TVsSAnZWagAAUc8P/jpPyfwNsYJxz9kFG4n1\n03D6a6RmJ20GL6pYOqWCDLGnpQbR+9ig273rgywq1KK5duWmDQVIx0lzsnSE\nHXzmRjjiWNqekBDLYt9MAR1tnunumPFU/W5kR9j5mFl0wsk0ozZgckLMWAB2\ndlD+ptsKG92/2t1qhOMhfyJel5XGjloGCNAb5TEYRTUhRwUoj52XO2GpcJu+\np6q99/CWt+CvI/44mfwIIuBzp3i9No1G6KbpC51BE/OgG4EExdDjPkbYkmhS\nboec4951JoJ9Sgr02/FB+ZNfeDAwGHr8Q/ZmeZtlzgjzFXU+nI4+4aXVfqS7\ndfNen+MM3KHiM4nhwKGCLyoTuzqIvwurZXl6Sa4IK5x0Ox+AqS7Vd9ige4A8\nmBmklJBo6s1G3EuIZ5AkDDfE7zkyPW4JCxz36lGgs0+q6rjaRaOBmA+XPZ/3\n6xN0+JJj8fZIJIS/XJKrXmmKmNxCi0p/kmE0fxnqKvHFSU40dbIQoziO7V3B\nb4X24T0Ub9RoaMEcY7UESYuCRulpPsa1AbXNKQcOtyNJjDEUqBgucp/o7Nbb\nZLnHf8hCL5mmxHC1uboV64qy1eclkgpoNXfyOKtL5iBBe4o5zm9MYGZi/jhX\nzgc8zUL1L2gnfwqzgfd2mA7NpeVl1j6Zl3WSZr60UN0R8rI0qoXaKfP0lggR\nWK8m\r\n=QTrh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHrn4DoFRfsRwKVRl+BJC1E6EOTXLqhXAXjhK6SbnQ0AIhAJ2YZfF+ZxuxSBR2sEubuqO1j7FGOkEnn4yOVzDbxGfI"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.d53edeb6.0_1625677258317_0.6962225634192527"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2226489a.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.2226489a.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.d0f9f3f2e.0","@material/menu-surface":"=12.0.0-canary.d0f9f3f2e.0","@material/mwc-base":"0.22.0-canary.2226489a.0","@material/mwc-list":"0.22.0-canary.2226489a.0","@material/shape":"=12.0.0-canary.d0f9f3f2e.0","@material/theme":"=12.0.0-canary.d0f9f3f2e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.d0f9f3f2e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"4ac660ba00e610510de0d1b8c86d4095110ac230","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.2226489a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Er5SAhnOGDBAGWFfVB62ZKxcvUM7wP4Nt9emOo/Z0PnsuXFphmRHnZzTN4ts6S1HIQWNcNEoyIzrtYhM32tQdg==","shasum":"66d1339d0f1a7c30101e24e351068b21c6151137","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.2226489a.0.tgz","fileCount":23,"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5z2kCRA9TVsSAnZWagAA4FYP/3jCjStpCMpSEruBR2hs\ns+rjrGZLZou1wHoJInZXUX5VFHANCKzrrQaBFAb6zyS4JppTuermGHEPMCRi\nYA9Lyxl8/W+zA15KgXYhsOFCT9MH3fCrlmmg1ZJZzVJO9GTO7XUnSM28VcvH\n5J7eVFjouNKMPbhEy1vfuvcExs33ZgqAaFdX499sz35cEuQ6gAhNY6lvpNGh\niSwzINKuhk7DOV0SlGxWoazdB+iB72eumlzegEHJgNA+LQ3VnkJHCIU+2ho1\nK+5VAPB5JZh1+tTzEfyM/0iXs4OXjCRWOzczSCxD24oy+mYkmRf8C/V+Pa3H\n2DVmapEHMeY231pLpMq1koZU5erxtD5GbVEBZ0hxNTh0RCyGwJNzTm3+rgg8\nz8vIOytWlbp77+RxXAr1sSXc7CLfdgKSSL4mwGfZ9w7YlKXhwwcin1T8/R5D\nZ2ofQVhNj0X8Gsi0GkoPFmrwx2/EnLkwcWgLEwRFTolEhNQHTz3cPp1gcNwe\nIOtrIEDGWlXZmr0y7+eiRc1jDNwJx1RbtN/luqSr3rWO4fmHokdF5Vb/4w3I\ndl77f9XD94VeJ5bc+nHCNV7ZB0bd7tRl8HIyqAGn97vvDgjwQ5z48QWPQg6h\nwHeXvy67rjg1qwlbsMjWBt150tzKiv2YNz1TgtTzN1gX9BuEyXmY6MA+av0E\niWho\r\n=jK8+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGiwVJO8cJxZO4xq7in8S394lD+c2UTMrYQ/xAe7VIRwIhAPj3RILewQafJb2TBVzKV8Iz5RT7W7Fs+AWNO56xWjAN"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.2226489a.0_1625767332036_0.7138885705906968"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d4801c11.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.d4801c11.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.adeac0549.0","@material/menu-surface":"=12.0.0-canary.adeac0549.0","@material/mwc-base":"0.22.0-canary.d4801c11.0","@material/mwc-list":"0.22.0-canary.d4801c11.0","@material/shape":"=12.0.0-canary.adeac0549.0","@material/theme":"=12.0.0-canary.adeac0549.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.adeac0549.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"2d6201005f2b928287b990b2ce5ca643ef37ce6e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\" | \"listbox\"` | `\"menu\"`\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.d4801c11.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fgfi4FcLp58WLoGmohIEt0CLo50B+C5K20Ac4MeW6ZeTTE7bSFm9U2barQTo8Nb1LFRZpzqPcedtGCfYUGfMPQ==","shasum":"1190c660973fe2273cc106834fc99340a835395a","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.d4801c11.0.tgz","fileCount":23,"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg51oOCRA9TVsSAnZWagAAgzkP/idymJpHGmG7rznVKwqx\n9tMM0kGQf1jiYJe3QBHyXUQtgZ7KrBsOh9zA7fkiH/jfPhKzeSO4gHJlFvIQ\nvTzpHLlHVk6Y3S2OZ9OjXG1Y9A3tkL/syvnBbSXCTWTtXxfqlzeAojlCSKEo\nPyf4X39X0VCt6BflEClWZNHEA1JTK8v35o7x+dvTatyzUOO7crDbAuOvuGZg\ne6aP3i/R2k11ZkEwBMulaaMtm4GKvzfPkDkQzQhgFVCqiarQgtnfTQ3rCjy/\nzRs31ocUGHEC2LtfUX3wWKZczo66xjkWBXuentI/wjACh7VBWkT/Km6MmYz0\nJzj9RflOw2du27qfSpOBqjJGw2+5tJF0cGwyDVKoUqbSa4tCs/JVzJZx06BF\nX5zq3Z6JaYQkroaT114VbrNgVDB/Pwv/Jc6AZItRVT1v5/5DAkhdJRhephvi\ndcMX4Z/xcIR32eBlIYduaEwz+BK5g+iGjAhMS7PQQDqd5z6FnZ30sME5XfrV\nUWxeuJt0ozXWizlxu+p7tVzAd8NZJT/33+cMXcMEgcqRLhedL2cshahBgbc7\nMn6FtMRXX6hYvjlk1niAV94PPZvbB6MOGxogz7BcpUKMGfjvXWCzvSyh7sST\nTYKoRNjjAE4H2FYoKYUanpBDiyxVL3Tb5yz7LhkfaNk2wGkr6UKgd4V/eyWb\nWelr\r\n=2cjr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBqZ7qDd1800ebB/WQMwHHq1xzHCu0x2fzpHjKW+KkfpAiEA7na3s923vmClLGUPgF8ewwljB8ge+fb6VSMWYe/XRZQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.d4801c11.0_1625774606144_0.30196800817816194"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7ec5f2d6.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.7ec5f2d6.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.068fd5028.0","@material/menu-surface":"=12.0.0-canary.068fd5028.0","@material/mwc-base":"0.22.0-canary.7ec5f2d6.0","@material/mwc-list":"0.22.0-canary.7ec5f2d6.0","@material/shape":"=12.0.0-canary.068fd5028.0","@material/theme":"=12.0.0-canary.068fd5028.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.068fd5028.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"530ddb2b50487eae209a7b76d4233a5b591dc62f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.7ec5f2d6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Y+mFpepa7YZUamxjQ+PTrOzxbMT92JSnENd6A9jJS8e2PpIBCeDq68jvFxSM4C+G/kB5TyPMe2yqIm802f+oDw==","shasum":"054f8b507e35f3228742cf2d39567015dbe6f9da","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.7ec5f2d6.0.tgz","fileCount":23,"unpackedSize":106312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7HksCRA9TVsSAnZWagAAvzsP/1ArfyxSVD4HdDLHNyEe\n5PFLB+5+6Q2PCBP1uTb2q9BLtgTxKuafoXRKGI8KT/r3V1ZmKzn3TDE81OLy\nV2sJnJMS6B4HjRbqZ7HoNzQecHMWYl7u8ms/J5X5viu1quvcjwq6JSN7qloZ\n1Kp9cKwIsqP4kZtVarX2BzX0XPTBVn+lMvcxQt+ILxKshX3k9Nt10D+My4uB\ntjAja3jhZXKiTiN2xHe1JGEY58VQcetksD1P46HYuAE/oBfEhdWmjk6vLlol\nyDuoT8Zel6FYD/FnKIpEtAZSt1gX9ie79mQN0mDUtlwbZ/WXiGMqM1typDcX\nTsY0qQz/vrZU0d/alVklsJp2Yn+cNhTMPvQroi6UtGiUxfUZ3FYUDXBGSQ9/\nWjjQFpXkJCzEe8jDPr99uqGGcVh0/pvI097qpDmRXUE0pM//z3MLyRsKrKie\ndr0vxg88qK217GcJLUgmNQ9h7X4OHLVpRqzN8NnNI8HEKe6NUpxg6bxljEMo\njU0S+pg7oxXe3ErlKLTEOtPmVX5qYRA4UBCMArw0gZjTI4Rht/URPzQfujwv\n7Rj8bzRhx5hoFpeYGn0/5vsOAKwJ+uyEiXH5CEGE+ptD994pfcu4izpGyweF\nmqv2wKEH70KbC3mCq7KK1QPc1oAaT1yUG4ZLEoqfJUSBc0j3h6aDPnTOzvuY\no2Tu\r\n=c7JZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG5I4i3NAnawXm6hZ6PFSJY+PpBU+x6IukdKpka3LWKLAiAO9CNP4aVIn2cLrYsdlSL1X3+B8DAThQiUjoNqYFu8Hw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.7ec5f2d6.0_1626110252424_0.2832183870458713"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.86cb4ca7.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.86cb4ca7.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.068fd5028.0","@material/menu-surface":"=12.0.0-canary.068fd5028.0","@material/mwc-base":"0.22.0-canary.86cb4ca7.0","@material/mwc-list":"0.22.0-canary.86cb4ca7.0","@material/shape":"=12.0.0-canary.068fd5028.0","@material/theme":"=12.0.0-canary.068fd5028.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.068fd5028.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"f679091aef1ae61c94f4217310d6cd1161c48598","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.86cb4ca7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZSvJFTi9XQVZ/1lrfjsYVop3fJH2roEawvBhjzLInJolVGvAiKm2dYhwjwWD3R6CQVCROVK05FO7BsXPjWk6NA==","shasum":"113b902ea2f86287b78a75f22e49fa3fefcb6825","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.86cb4ca7.0.tgz","fileCount":23,"unpackedSize":106312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7c+NCRA9TVsSAnZWagAAeW8P/1U0dGY9kBtldQw4G/vg\nJT8SGFGG6NTay7ZAFLtDzVkMov/ZmLxboAofLEgimwa4IzhT1qcW2UbA6G+7\nDRuMJAdN3+5/0cEXHFIA+FrTYyLJWQGKEqLLueJlLPOa29CqcrgVknZTkeFF\nYviBDToZghJ9D5c2lm4d408sPPtK2qts7IE+1GxsLEwSVyUQ4EBZJHSzIg94\nn8ixd7r1JMHj/zKH8HHTWKM3pw6Nyb9/OEEKAg41RbVOtJA/hOksArTXk+o1\ntWw2IzmeQ2Dya499Y8cy9ajKCFZPr9rigPi8RIrVpy1usVcMFiDMxb/zr6S2\nR2+FWe4cXDLDrHEX9EVzMkqr8AA6GzJZeJab5W6VB7LrAdNzABdBH3AuuAK/\nUgpIFUm5r2zpeghL6q3T4xpRKbXKvh5Ki2lQuyJoH1TpIcr0TKUzZ3wE0XxX\ntGNF/8tymKMtifZZ8DTHvs/8H+2qAJR2gUhB/NhQirhsvhvgeOpRwZrX8wx9\n7lN0AyFL1sGwizWDVHC8Y0tBKwzEXnwVjwKlle1B7B2untr9Kh3i2UKFBOb8\n4yJPIVdgkh37Q/8NtyXYh1UKku18cWrxvnnk0gRMrwfK7l1+i/jdEyc6az/2\nKvZqEG8h9OvM2IeuFjaMwtX+nUXYNJ6QHNGRHRflv9kq/d1theZ2tE6ew5PO\nBLHc\r\n=JoBT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHJWwr/8yC98POgPLli8eLyTqD/i1mhlsU2Ecd+eVndJAiB3OWCfgE8yB9BZHjHrph/Yq/XSchRhqq9HdpRilKRAlA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.86cb4ca7.0_1626197900723_0.44462548318870465"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.bc9a724e.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.bc9a724e.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.ea77795b1.0","@material/menu-surface":"=12.0.0-canary.ea77795b1.0","@material/mwc-base":"0.22.0-canary.bc9a724e.0","@material/mwc-list":"0.22.0-canary.bc9a724e.0","@material/shape":"=12.0.0-canary.ea77795b1.0","@material/theme":"=12.0.0-canary.ea77795b1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.ea77795b1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"3f6fbd971026d270d71f4fa8515adb70cb387ae3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.bc9a724e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-usizsUOjl4R4ghE+6so8afmTayGhtX9T8BSERTphFdCr4VOW7WWhlYeeRmSipcRJEZMs6VMb0vvphRLQxQws7Q==","shasum":"a0b91ed3c81768b6f3747246adbfc5d7b1639a72","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.bc9a724e.0.tgz","fileCount":23,"unpackedSize":106312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d6lCRA9TVsSAnZWagAARD4P+wXLRsn5TyHXwRFDU2Yh\nJMKQGUfXwH9raPYTpDjGNdQEC6yNQv1NNmpq2jWhSUN0pNFLnFGNsETLpJHJ\nYk5ff7popi4KPpMe8fZZWgWc8omfMxsqbiWhJRilxaqBj96U29Yorux4D9+3\ngDvRWdtBB9LG1B17OJmiYYnLcH3KKaWLRb+O+ZEZnFE5luD/C5oAqTSNNIAE\nRF6ROQqFA+/p26Ic3fa/NS3UI84+wwttyF8QuR5WJqU/T3WmZS9pew62hd64\ngafubduL5DA5I4kxuP4U+S3NRMt0ODYJmnjr58hPc4NxZiGq+IJf7U1MtStk\nXCmkZOMO88rY/Wb8QDCeV/TGwjt4VxrOVxUPg8woUgudQnOu48NcS5H74VDU\n9gN4tSca75zYHMkYTnXyjwJ2UdjZEP6fUh+6pUQQl4bjooYuxqZIYdah/q7E\nE4ROkZWHp4Be2+KkTPfuzIxIijHQLN4n7RFwKXz3JJeN5DnvOt5DvAMCO9CX\n+Rf67R2x0EXbqeYnP4DwTiSbakuQMlN1wewMZxNFCQ+T0WbMIbeRTgd3v0Gg\n/yQKp2wWu0Vj79jW83YKB51lZ30UXmV5nUMBGck5j0YNqgGfnyj7lIQNlqYr\no2X/sJs3UhlVkghF7L+JQyXArEf1irAlObjXz2kwlFymo9zJOe5tDsBt7tt1\nKMj3\r\n=YEY2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE0MgdsvuGNNQ1F9nB3POjpGCkGEK19N7s3LN5h+qb05AiEAxWcKiZiQuNmqpJzzFWmVC0eSJ6DAu2udXwUNSjHOW1I="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.bc9a724e.0_1626201765260_0.08197715974948272"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7847b83a.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.7847b83a.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.22d29cbb4.0","@material/menu-surface":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.22.0-canary.7847b83a.0","@material/mwc-list":"0.22.0-canary.7847b83a.0","@material/shape":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"96a87e19e381c977d8ac1c7a5a20a261fe54c448","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.7847b83a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Y3aS87fWd5RzBjChQ6ZC60YnwAkfwKow4B/Tn9oVwAN5cjwSjpX4qDRNDpoyhJQxMyLmiLgWRGXMUqaAm4wnsg==","shasum":"260e09e51d4fb6fd60c100ae49c76953dc70405b","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.7847b83a.0.tgz","fileCount":23,"unpackedSize":106312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7xyZCRA9TVsSAnZWagAAPi4QAJ8Ddunv7HRblIgiiB20\n2mPoms0mi8wxDQOw5e+DsDYmB5LwxIJFKqTzqA3Vlz5rd0sGk52fR+pOx7DT\npH1Z2GsCQ6ciyXZ6zsQCMC6WG+PcDI+ILOdE2ytaG47T7FdPxz7O+bvn8t/2\nu1BAJWc/SIV8UHOFAkt527Ss8nHzUU1DZh1FZy5qlnkG3U4ERIeHevzKTWfb\nlgAndZicBgA3ddThCvGXYJFGgay1nWOMXnP+V/B0+SXHMW3Y/R4wrfrHgp6H\nvBcd8TKbzE9BG+xBK7TnTvuWmUaUNfdhKtCJvIGksjeasdHJF1tglBKpUFEw\nu96SFKf3LGuBClTUtbbOzF8O/n63X9NzBFnz1By1B7qyh+oPMA4D1KOhQSC8\n1eth/QiopcAbxR/5FNkQo18KE5Uneo4jePt29Ll3Ujlna+wqychGNAJqowgB\nSti9StnJZ7vOhmy8qZp5NVwNiJzxVcRGhLqT3ZW3q79J7MOPWey35yBzifDV\n3XxiLHhXSfKBHPBmtN6votbc14TFDYorTsKeO90BKAhf+/wn2Mjtb/AXA6dH\niXngUs6/7kXbthw0niuliqfl71yaE5kiP9tzXS5gY85n4SIi2Xr//MwJAuVZ\nzl6ZxuVxDf4y4wvb7SJVFNbm83ptnMu06BJffj4xVp+F01BmVXiKDAQAmNt+\nCz5Q\r\n=876J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFf7rvLzDn5iC2nAvn7rTbYVJJVj7WiXmgqe9YtmXiTfAiEA9pdHNrbRQzvTObczJ5of/x52kpa+2Wr29zS/gELy35E="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.7847b83a.0_1626283161306_0.136430461863557"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8cba18fa.0":{"name":"@material/mwc-menu","version":"0.22.0-canary.8cba18fa.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.22d29cbb4.0","@material/menu-surface":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.22.0-canary.8cba18fa.0","@material/mwc-list":"0.22.0-canary.8cba18fa.0","@material/shape":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"0eb1334d9597f86a21b5f9edc232a1c0f67f6abc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.22.0-canary.8cba18fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-j49JWgqFpZx+XXBosscC4Pp61WX4h8KjWpdr/5wRyO7CyUXA6WTFQ/bLqOkDlGHoBVk1vgbj8clFGD9ay4H4VQ==","shasum":"ce21f4fc74a953c93b4d9cdf69bbf32f7e3b142a","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.0-canary.8cba18fa.0.tgz","fileCount":23,"unpackedSize":106312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg70inCRA9TVsSAnZWagAA+oIP/jhobZRyLvXVJFYeje1s\nafgvTpiDoq0j1K34JwBNYkh4YhxO+Q6nicldVdTp3AqJlzhReSSjG8nN8f7z\nbBjaRL3gzjK+nnbgGn0Wj3UGxGs1BXAIrRcUI65n1xwkKptaA65kFFB0Q15D\nDH9Hcpc+EuZI4HkfNIW0yZAueWxV0c1001u6QHpZA9n/xvV2RNXtHWBFtwWw\nWk1j5bE0XczP2Kcc6dslWES6juCJme2A/YED33I6IysW0MIecRUfzCw2WnHR\n0pDy8bL5JhbZEsuZYXObz85iMdq2IJA+TXuyUI/wQFz+u76xHzMUenz0X795\njVN806fx1e30KTSiAg1u2PHLP0VJLkYs5Pp2LtWC4CYHjNFFLeT1hsF4Jq1M\nNawBKIWIMTwLEJPbbsMv1HIZQMpfE/QkkIvCTiyKcSF4AEUID+nsQqxaGgP8\nQXKy2TmoCBnKiSGBa0SwjhwvRV6wF7snaFCB4eTMRZwDqQjC7O4/s6p0iUYY\nHDhD5+Zr4rQGhSTnG06Uw3eRqIlwkUBjjyV8qcJH09nsEvBxMxRplkJKQyHX\n5hH+WdEN6W1de3q6VkXQZ7uTDgP8afCl1Bby9Gi9PT4MR7i7mjhZqchfQVOf\nPkbdJC3qcQnHjMYRKa6b/p1O3T3TarQpNDY4lmjLTZl+K8vJGOrM+i4CS//B\n1USI\r\n=d8Iy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDeH01/6p6GMcqwmLfQoeWwvIji13cF60PCiaiTAdAO5AiEAqi+er37dGqY9nz2GsEV1rWZUvpeqGSBWmd5PHWelQwo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.0-canary.8cba18fa.0_1626294438618_0.7203916062630236"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.1":{"name":"@material/mwc-menu","version":"0.22.1","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.22d29cbb4.0","@material/menu-surface":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"^0.22.1","@material/mwc-list":"^0.22.1","@material/shape":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"fbc09b4e8766843c4aef86023c2cfa4cb9e7cf5d","_id":"@material/mwc-menu@0.22.1","_nodeVersion":"15.8.0","_npmVersion":"lerna/3.22.1/node@v15.8.0+x64 (darwin)","dist":{"integrity":"sha512-fY7dyxv9aIccMqPp0+ihbXfB8g7Khvz7tYhtVMLqb6CgpdXf06a/lW50eN0Mk4GC+mFyN36HKHDP7LMLFfsvlA==","shasum":"1a45b6443d31809a9a968174fc5594e881c6b0c5","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.22.1.tgz","fileCount":23,"unpackedSize":106260,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72rVCRA9TVsSAnZWagAAn0EP/RQwTUb1X1A/KckEdzQa\n9CZ2nx6gJFsH034xivEOLjyfakklLw79NIJLm+xqeL4C1JqtvdVU8h9f92ty\n4vfpCF+5FyqR23jNZWC1CFzFOjMezBN2UwzIdckhMJ49I6WWth8e0ZaihUwk\n16XjToYW6AZ5WAao0GYxBA2bfZdiFtBvNLqojKGYqR3Nv9416DWa7kG7Ac2y\nlBDuB/bI4QkQP7j5cP79EVVJpk/0qqJcdmt/RsJIM9XDnFgc8XZcA31iblk1\nlxXvn+PZVMjNTYYRc+OBjFd52UZmiVNtH44J31xnUKPI92nUmkLq4jBtlevb\n89v+X+P+ylpPpjUP4bIUqa5qF/pLpisDjxG8JUzjAFwRy2342qRsaJQdXEsq\n8gaMqEfAZljL7jdq3HgHt1neNUqS5rUaSyfC+2tp2Ib3h5Z77zrTUxJMuX7v\n5ky2D7fzghPu9XJCabcpA7+0SnIAxH2YYj0VqHZbb+Afzm97sliR0PijGHsP\nUSXm9js70Jw0+iL+XHk+1zydjsLAc76gs2IqEsxAap7TbL0NYEPor4DBcfR+\nZwJu7Y1EyGvwyNd616BCsolEgHv/TClvzU5yINjlkgWyNBR08h5EzYRLB0Dd\nGq29M2h4YbAPTAZHeP+cJqiovcccnTiRTsrUjRTpzIsLsYa5ykVIADvJ9bue\n+zC0\r\n=Z7uB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCyyHfZKzLP6ZKG7I4e0ClTflD9FS2f2mAAMCDSoLulkgIgeaow6+0ldTHLGraV0bCif8lnvYGyg488k+TOoVPuSDE="}]},"_npmUser":{"name":"aomarks","email":"aomarks@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.22.1_1626303189398_0.030853790233402734"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fbc09b4e.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.fbc09b4e.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.22d29cbb4.0","@material/menu-surface":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.fbc09b4e.0","@material/mwc-list":"0.23.0-canary.fbc09b4e.0","@material/shape":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"928fe21d53da3c383833e0766f262dd5454356ed","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.fbc09b4e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7qWBpp+jTDSDImR50vx5t7epSW0tWCXRtgOZtzGYU6s2dJCo/VHI+YyxnouqSV4Y5EtMz1GoFu/sPndv4nsU/A==","shasum":"3722320d7f9c9a4a2e3b3d3471d51e8f2c507de5","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.fbc09b4e.0.tgz","fileCount":23,"unpackedSize":106312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72s6CRA9TVsSAnZWagAAFBsQAJs7DseP6cW62VhEmAcb\now5Y7ilDyjx6shogeQMjBMr70KotcB7vpHMGZ98C+Rx5v0KbaEf4oP/1zclb\nfy53OJ96QCS1u+iX5muOfmXCB5PlYhncDkAPgj6t0D2sAS7WrAY0FRv8Gh2x\nFOB3ImEZsFoHKCOE5+yzSC742FOiFIMrkq78zx+175gi8PX7kD2RxQyysKO9\nlDQD8D8gHbZx9GMnJ6fxTVRNIlQ7EeYBd97Ko8IXQw5NAr6AijtElWKymlNC\nJD+ERLpvAMyiochDuvSXwzqZnScz8eukC5GaofM50yP30KI2qmWEMyWuJ5Bs\n7qRjqqvf7TIWTbGsG2nCRMWyD+x0Vqf63cIzAQUBaTPtP8I9SiG3TrjSqAnb\nAAOzilnSrMXbPQFtxmkjfNs9ugkJAkQng1qeo4xoN9rGwYdria+bXa2cx/H2\nSx1ZHV3se2ElpjANLsOWD2RLEX40qo7Aft8OOZp2zA13imGG/ENkmWOYl0Dt\nXVw0sK63ADjCzHlhz43wDR4qxaTZQL4RzFGk7Agm+u3ngyKZC8zR1ILPCaEv\nXtcLe0pKw6Ow7+vJxZ9BLImf0wTpiUJjb+EmBtwaYIpU++0cWNU7qGE8i3IY\nORoQvJjWrutfwwBrnmuOKJ3C0h78oqIfGVMEahYTqR3R1qKJha2zo2T96tJ9\nfLFC\r\n=GTGe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvM6s6kNu4hnbXeN3DMfXzhbTalZEWZZbbQ79kxd2/zwIhAP5MZhVwK/7ecil+VrdE/G9CqCUe8kMT/M3GMPdv8idL"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.fbc09b4e.0_1626303290085_0.4546319641973453"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.73e9f83c.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.73e9f83c.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.22d29cbb4.0","@material/menu-surface":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.73e9f83c.0","@material/mwc-list":"0.23.0-canary.73e9f83c.0","@material/shape":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"7cb506f7d4ddb8897417b2451e1dce233644faea","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.73e9f83c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Db+yRRIT60tB9XskzfPjs7nuwKwtdu8pAIe79z/8snJZU9VX272UojUCaDiLlvw9JJZeU8jrvP3VOKrTQICZcw==","shasum":"d7bffe53c4ae99816dadc62df9b3dbcef16525a0","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.73e9f83c.0.tgz","fileCount":23,"unpackedSize":106312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8J0tCRA9TVsSAnZWagAAnGEP/1+lxWMfAdFMVgSf4J2L\nCGgByGAPHNY80MDdAftN49BJJOd8RGetEeMU2lsH672jjyb28VsnQhDxl3uv\nGULYX/lvBZGmGhGGvqxwaZGFeoBeOmIlNVjmyfAew2ff3xBzI57EblGOqP+1\npyC1BmUy/rExE/4f/XNVAlH945wWn3j6cGcroYsrID+/2tcPz1zAi7R7UocI\nCACGcIBUOVkH2VN6PEJhCGK8RaZnkdILmxGaRkuuFxUC9lqqXxNSpnIzE24i\nm8reIEUyV5JrpNpdTHYG6loKIX42JOFXLRiTSM6L83s12gbGUWXRfbKqp/aB\ndQdC9emfv4ucgCpMJSJotpdTSrFcLg2vBqnUFe51G95FtVVQDuBw9Yh6abrj\nTavCt+NLQS6Gh/CWbiYI2NUVvqxGAuX8A3qogfTaFwPMeCCgndl25G/SAbFS\ndsJko/Jed3dM3vtFUidMzK0+Jq+KEkaMFndHvpFfDZ6wUTFraXDXn8SPf2qJ\nnvtwntqYR9MzITt3IAXtE+8ugJItCHDPs/q8GRxmMa/tBeHXL7tH8Knd4JTf\nFMfEjIbe4UG8t1rT2+Bhsorvhj1nb3sjwSaWTn0VxTk16672YZ7iDaRWfXUV\ngoPfmHNlqxVFkmVph2LvSIVsZkgD475e5uesyKgDFzWJnw+awqJBwwNHj4EF\nwBad\r\n=k5uz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUxaYPrX90H94b118KY67P6ZgEb5kzH5tjHJTz7sauMQIgEOjVaZoUTF9lqRfxn6WvT0gL23rL44clyAJRiP52L7o="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.73e9f83c.0_1626381613408_0.4381966312668204"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.cc0aa7a9.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.cc0aa7a9.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.22d29cbb4.0","@material/menu-surface":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.cc0aa7a9.0","@material/mwc-list":"0.23.0-canary.cc0aa7a9.0","@material/shape":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"46cd2c64b884400d63eb38fd81a1ad72accf42df","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.cc0aa7a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ygReG+EJj3m4gPM5ZWjArA9ihnW46S/a6WU0d99kPgYqrfRzWWLq4SoAitTQxqO4kdE14h37s+8UVro6KsYikQ==","shasum":"d84cced3d9cf6fc0a932e37e8a1313e9af1143ed","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.cc0aa7a9.0.tgz","fileCount":23,"unpackedSize":106312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8KLaCRA9TVsSAnZWagAAbU8P/RjMW+FqFBLRwPegbFwt\n2e523fakDb6Ig+w/L7+Vjfsd4AmWEaOdmq+qQKihL9WsY4vVK/ZmON46w3lE\n9iCvI2DO4vUsCN1HlZuovtT0Dlench7fC8fv8kO93Opt/DRFhJIEFsfSe44a\nnNV8FzcAqXn+Nu3hixGc5IatfNTmdEn08/V6eGVlrQubrJcIkKNG4SS5FbGi\n+bvWwI3wBQW2CwGqNQJipB0oma6YcHV0st0TbRB6Rv+/aoKrb2HZ3fgktdXW\nBCWSjjyLhzVqcSNQgDi29rZKSr/CJ7R7brG06LCXDhBXQOAJjsj/nuw3HAe/\nzl2TeDXHSV0KIi+0j6eMAwcN5g9caTo/dBniQbtH4vQDHzVd/Em9eZOWzq+0\n6dkhbGS7I6z2oQA+OobIW7R/O1fl8tZcKVa23E+wQkCdQkeDAJSTIJyMklY8\nIgQGwK+aUk2MYhadiZbN4R1oOxvIpLjkOkHhy9Gn+8/SDRIsWrhEK0du6Ji4\nZmyMBSUWyEpaVU12xllTAE8RZgMAS4dSHnLd8o2Dpb+PMc8KGETIg6SEek+C\nYytxNKxmRs9JQTtZirrtiXBj2xVZHH8R5IYUx451i14sAj1iJ7JyhM3uYGVO\nDki948f3GJSN8vmf/nNb2xu01CIqwh6qIRJnmHl06zhrINb5R/gMHMrNi6mg\na6M7\r\n=eaQK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLIY8R/Yi7dhwHmb7PRxmTijCIAcCwzSfVrzov6DEU5QIhAKO2HeOBCCYfMZDHjLwPMOGcqS1qHTwq9Tw41qU/zZmq"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.cc0aa7a9.0_1626383066340_0.3031268041287327"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8fcac45.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.a8fcac45.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.22d29cbb4.0","@material/menu-surface":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.a8fcac45.0","@material/mwc-list":"0.23.0-canary.a8fcac45.0","@material/shape":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"7319affa5e07f6651089343a3fdf21864f2d3de3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.a8fcac45.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ARgJ1S55Gwe8oTQwOYJeIfCBxFrCAB+23etD80s0fJSRct64IzGP0LN0VNi/NY4A0GxDE4Mu9vQRvyOf1oYjig==","shasum":"8512a903062c4a73c437f88cafecbc24bf6f67d2","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.a8fcac45.0.tgz","fileCount":23,"unpackedSize":106312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8KdFCRA9TVsSAnZWagAADVEP/0bQ3lyN9RP2G4VIWDzh\nYoXt8hyA86KHTJPiJbVySqiGpAJO2vIHGYWgNxUo0851ysih4XSHAQOyBd3U\nwMsD0wvzZYb7i+kLg22pWzWnwqsfvy8nHWEJCT5tAyrdWZXb+n+EVSlS6lfI\nRsub+r0eqMjA/xZ1AUE4t8SN72FRncFVRTFMv713QJcgXJi8/LZGlZBAkHNa\n1gbD2wDnwxujPZMTZ3HwR+0sDskG/06JW3r6xLR/f6cZZLB8EgOdsma4n6QT\n1Zfmvn+02nSZR3p6JKz8RSZ9jGraCJWTlluArxsq8R8gqthUgHiB5HoRzFDm\nurZbbTcOfRJtGJcSZpjvXD/1lpczN7xPlhLdM7E2KaRbBO3TOTLD0sgbjMWi\nh39hFEhlur6Is/CL9Vv+pQWEOD9IpK2gZ+q54mLkSTh9WMLZU/TXKd+WrJRS\na8Pf1PXfCsBsvGzMd35n02Sk0KxiXXwkf1fzymdBWCw4k4k0WTgeKoceDG4w\nEQti42UvQ0XceS0HPbrHJqLS7d29/VyuQRth6bZKMmWUAmdqQWIk2D4wT7CG\njwgzLXTBl+2rZHjkbkOgMoUl74f7Ou0bMA44qJVkCxq2bPtgjc0BAp6CW8iq\nsJsVwzCV0KaTUWm1NF/+qu65EQy8XGQyk/RP1xYfmvBXYrm8OdA0/IcYQRHr\nU1p2\r\n=lJLf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEZoj6CHeLpxx98bI2BYNe7fRUyZ7LmI6BMbvYnYyrliAiEAof4aIHdcb+MGSBuW2VwJk6L2ukYrtaU4j6oQnNep36A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.a8fcac45.0_1626384196952_0.1888330926100119"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3ca580d1.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.3ca580d1.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.22d29cbb4.0","@material/menu-surface":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.3ca580d1.0","@material/mwc-list":"0.23.0-canary.3ca580d1.0","@material/shape":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.3ca580d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UoVkaUlDPGWMCCoNLEcHLAVDtrTUnKgAiKKOf+OqYKDEAnIEn7pFEr8XioP+ZaoqT7lBZwopXQcKBV+D0NRz2A==","shasum":"4cff609005fc839f5bf9ae787a95a6c42799db8d","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.3ca580d1.0.tgz","fileCount":23,"unpackedSize":106312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LD7CRA9TVsSAnZWagAAtN4P/2ovGlpNfg6OBhyKtAF5\nY1ojY2tGSoL4zUJo0mIJc0buhySPOBAmoGW3hmxZE5BCDgtAm2LGPC2Gt5iq\njN9D7piUWoezBakO6Z9T5/bGxcmhMAPioTTmeHp7mrFolJGlR3yQ2gks1YCH\n5cZNhYOCKxBmmLwuwrSp62CpQPdPFz9Yf2wLEmhE3E1SB2MrlVz5yAr/N5KQ\n/NkkfNNt1I4T/Mxp1/KpPtQ2QIrAiw9cG57AklFaBuBFBsnbCUm4fkV0DURO\n+ThxwTLXoGvnlzsTYH8yXb2jTGP153Cm0LuaC5+G7X2AUvyINLRn2alT+wMd\nreal6z3ABnusmcRcuQxtw+oJe7xdSqVzqpc8ZypdthKsHzKVrQFYJZxDiHKx\n2ABqfdQZH0YxkvmLiVN5NwNYaM+SYTmWPDwPQpY3TR/vOYeydrmm4acuoj+K\ngsC98D9qL0KCjgDCuCK4yBY+FvM1buT6aul9/Usc/6PjSZzZ493ZFNqmj00g\n1oiHrE9JICHPLh8KOTaKxAisBDpAibcehdIIZF8zNnMP7/1bMc6W5KwrrXL7\nCAHjfo7lnmuU62c3OHfsqzV8CANo8rLlSpZ3ei0JOgIYzyxpNVdeP5+oqON6\nmzDAJdfdiGBQYpeF/zisMSM4Uu5CAlNBjiGo8rnBlZDi3MEVHCbcG4kt8Jf9\nacyC\r\n=rqMI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHzknrA47IdfybbA6GDJrkwzj5ojth91PoY7bftWfAlRAiAFFospHAZKPqqGe1acMoAJDOlOfGaLuWNaTmBlQe/tLA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.3ca580d1.0_1626386683716_0.40616084565219945"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9e41cb2e.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.9e41cb2e.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.22d29cbb4.0","@material/menu-surface":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.9e41cb2e.0","@material/mwc-list":"0.23.0-canary.9e41cb2e.0","@material/shape":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"66f1b7c941717bc279a73626020dd81fa186f3b2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.9e41cb2e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Vs5GiYAnLsFzqA7jKmsm7HyIVnoT7Hs24KeWnsCIyqW3xRjdH0YAuAggAQhZwGbJkjDLUTgUN39A0B+nNZm4Tg==","shasum":"4343cf2596b015da793ed5094c01b83eb7ead43c","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.9e41cb2e.0.tgz","fileCount":23,"unpackedSize":107194,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8MAoCRA9TVsSAnZWagAAgEwP/1V/cypgS6nk46G11cZ3\nrEnnS5XaPuE8ydGF0vO7txsFtyLhlHKRRJyMJd3UCCREnfYO/Q8WeYapNT4w\n3y+CCyQcp9Rkda6J6rqHQU8KnO3CL8xauSsh4mp/9XwIBOhogwUGDHMEkxRu\n4e5q0DCf+ENdke5GZ+Y360uHMogNaSR/zK6lApH8nuoMi5EWuz7p0+ovz2ON\nzCmvMj6EjkXWOyKc1DYtAo2X2k7FV3pa3sQBHIa0mU6sNGcuCM1W4p9yH4qa\nwDa/oc2WIpYfuSnV0uBamzG+CCHP3ZbmXtLgthcVVEn5z+2KEnNqeTw8D4XE\nfElv6I44Q6jnOcMu+jL2pkE8WGfvKdjcQ7YCqMpkQ+pUOIk8XW4Lnyl+fR59\nHWiFIdVE+EivBHS1xlUpqxzuc/B7P3TzZp3ABPwEWfHVeSrTt/DBl23xuG5h\nTjAoOKDmO/BlF5prxh7Tv2W7OmTF034ON1XKCr9DcWkkdZFZY45Nzy/kR4Ti\n9A36Oo40ljXorCMKghrKSTnXpx6RXk4jbwTGOHYeQIC6eF9WTNu6BeOl9wZN\nsXXb0L/Uve+zck0cXrdTdMkD6ab0HpARTh+NLlh2P/ZoK8z5qacl6nWhjbKS\ngXCNU2zZ94RHL6N58hoDxcNT2CxFUu0YNrO/oA9aKx2IFK0lPc0AA2g044QI\nnmQq\r\n=C69R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwMBrKTbMEIOxVOBoYHdd0C0kJCnlWHAX+sk66YE4sDQIhAPwKXQW6rOAdZffAQffbY6ROOCFX81g04zrO+dM/eSH5"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.9e41cb2e.0_1626390568562_0.020265203644398877"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c180db74.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.c180db74.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.9f68a932e.0","@material/menu-surface":"=12.0.0-canary.9f68a932e.0","@material/mwc-base":"0.23.0-canary.c180db74.0","@material/mwc-list":"0.23.0-canary.c180db74.0","@material/shape":"=12.0.0-canary.9f68a932e.0","@material/theme":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.9f68a932e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"33c53eb23c6f331885c1a70223139ee7e69ae97a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.c180db74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-OwdsUfVE3dDn3MeyJrCsou7S0H87YZXWY0MbpcXDzw7Kqcib1oxez3KC7KfgLVAUcinOhvcAlMvwv7S8lWt3/w==","shasum":"ad554f19b144d120b66a1e69d2593ecc215c21fb","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.c180db74.0.tgz","fileCount":23,"unpackedSize":107194,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8cETCRA9TVsSAnZWagAAhY0P/jeBuS3+biwrEtCfQISJ\n1Mu44ow6w1nk04BAH1HMjalBzS+xWNXBvQbzqIITXM8QYyDqRJFqcl9piLZM\neipKnsjQs3bcsYCU44nA0bZ61popTjSv1CXOKGLe1lZb8e5WRtLZHaOahAGD\nodL+NlS4DKWG12hrQY7e4MihV1R8uGwQL3eX0Ggy6J60f67lOvaXdXnpTyJf\nWaVOUKtJMd5TAXK0j0msio3az115R7cYetWRoezS56dsn9TavaTdqoSi/IeV\nKqJ9LQblvOLFvBPeyUVv7ohq4MMPwGuHD7C2sYtV5x9eiRcpY6yxhdvtQnc9\ng2gE1UYvfFeElRldgoDKzMlcTv6UoSBIb06rsYBiGj2JRh2uJH/nO+NQ69no\nrNG50ZF9hkjG4Oc135I0rFJ68pccNZ4aFw2W8DcuEXQVyQWKTwhneYrjZ75c\nuFRR1Bx3LlYl3dxtMy93l22feVm37HjwlX8huOtKCXdp5EHYAfeCa87+hQjt\nzwerbweRGa/Aavyv/8epm9JDRasSJB6qRz4WFecDUqeqp+HGBUu/dKovPkt6\nZOgj8w2aPJZ2nEYCeARorAY2FGUqi4vAfivQNlVZL9OUesucCXIaR6o+2NEh\n5edxtH7B23zL5SUbAeDQ0wq45d4WK2AB/mwI/pvRYBrYEcJoCpDxxweTyXSD\nozP/\r\n=mHNH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDN2+FvkL5CW3YyXNE8hiky+4KyA/ok6C2iEPoJC/rRjQIhAPBZHM/Z5Vv07wxLb6iK/ELklpkqju+u83uArEUgQWK9"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.c180db74.0_1626456338977_0.33894973992076083"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.0d0a9267.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.0d0a9267.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.9f68a932e.0","@material/menu-surface":"=12.0.0-canary.9f68a932e.0","@material/mwc-base":"0.23.0-canary.0d0a9267.0","@material/mwc-list":"0.23.0-canary.0d0a9267.0","@material/shape":"=12.0.0-canary.9f68a932e.0","@material/theme":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.9f68a932e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"edc1a3fb88ad7e6dec8f22e73f329dd02bca032f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.0d0a9267.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-KV42K+qoI32eWi+A7PPj7mFk2vO71xP+uV7RX160lK+BJ0gQt7bDhuCTIzdu9LF/0rQBQSNk+E1u1qQusnAB8w==","shasum":"145c241752ec253053017848fd2035dd24bf4bc6","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.0d0a9267.0.tgz","fileCount":23,"unpackedSize":107194,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8cihCRA9TVsSAnZWagAAl74P/AzeX01ct9wvudN4Lx2X\ni2GPLQVAKZ3xwAX+9V5WAX0fRPFU3IWW3sRdfdc2NKw63d81VMeq8q8xnWYV\nR1VbXNGPqLHVagSL+P4AgRkPRj42QuvichrKmHhCFYd3hrg0UNEXOAbYa714\nC6DI+BHhlaOXWhg/uwNlDU1EQ21hAJWdKaTGx8SM8hCQ61ftCLEU8OcS63UK\nJa92ojLA2Is1Rr5f85DSa0bb2kHrxMGkdfRwwDAhmxz10hrj8WQaB7lZDq8Z\nZfK4hNMT/vxwyBt33iQc7U4WGEFWcVCHM4dGeVXsxOgvJwAIgmmaD8saKVCM\nknmuWgtRyiDCIB8zsyO6w09D5roaQykWBOPaFu8sBfTeGB88qUNVGXG3hu20\nS1Qx0celr0yn773917Qrf3PrWqWdzTPTJDbFI9973hpNBTJwRHJjnsmsYawf\n/Klm0lQHSWmGPU3wffuoAFrjbEwQest3SAp0aaCdMK7mFxTb8PV/UESkdPNF\njboSFshPmGj32OmcNIMeXMtY0MYOYc94zgUeTL6nPhpCW8D36ZMdCY16cvBx\n4i5yOSsiRhcpfsoFGh0T2QNg2fVXDvqVgEC5wkQECoCo6RelHgLYYYxsSR7n\nodCGWnbGN47rErNHE2ZItdw4HuaZWgoPHn18E9X1GgFCa5BAI+T/cnBQwVma\nAyOu\r\n=zYPY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHQkpKrsqgToNFkgPRxkBKRrk997Of7DV6PkLee71rabAiEArn/GBfwoPUqJKkFCqy2IKDc8S8h698mnJCPeK1FAux4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.0d0a9267.0_1626458273036_0.47566132260429717"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d234ec3f.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.d234ec3f.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.9f68a932e.0","@material/menu-surface":"=12.0.0-canary.9f68a932e.0","@material/mwc-base":"0.23.0-canary.d234ec3f.0","@material/mwc-list":"0.23.0-canary.d234ec3f.0","@material/shape":"=12.0.0-canary.9f68a932e.0","@material/theme":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.9f68a932e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"950f54539b9a71153ac09a57ec5710112c307c8f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.d234ec3f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-lbm6RbKbBtIMl7mFenbiJoS+Z8deEVmNResWqDJyNJzF29jsZyy0Z2JC3vmKiZrJcQfKfv6fCN6kg6+6juxJ3A==","shasum":"ab0eecaa0a190d79d3124940bbb860ffdcb1caef","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.d234ec3f.0.tgz","fileCount":23,"unpackedSize":107194,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8csYCRA9TVsSAnZWagAAg2UQAJSwuVSI/S8pUS0/35+a\nkWAwKCdalqkzKPMw18s+PHnUQWeuJIKgq7Rzq472LtzpL9IgberlqNpNblWj\nSJX7YpIR8Z8usvd05DYOjc76r1oewYrI6ffbm799TH4VA4olgSjwqxK4Uvhr\n4nGH7CtXtZmN3yyqSVEapcGbOTNQbKGLr7Sywq8APM0UDOKdeyVzFJ+XXj3f\nQaCGBz4kGjf1Rcfcj8EkGFInbbML8Ia1qCkt+bvikAlY03FjiuHVwM+W559h\nDyaNMGeZs1bPLUmmEwMQMTs5BcCmcnr8KMiLcUczfEPXBHzuS3yA4YNWo2vc\nPnJaZr5YF7BgUVd38ZyXqb88j+BzaaRnBwz/doH2Jqh4LYG2i9pH9nmkaJRP\nXYclyOZWlDMKJik9nXZfHp7GMXradzCPdAGsZK8tdjPFE6AFwIBRnp4i7WBz\nrbUcHYWb0LEgOOEK3CqufTEY13hOzd2I31F8T6gQSed/VVxirwt5pNY1r7pa\nBMXd+fkMTxrDkuhvZzJypq4zt4jQPzASFWGVVsvDT2D24uXUaCqc8ztFEbUo\nNg9LdfEO32tQ6Ats5n9DyPrMUhucHxfspcqiv2DpaK+Mg5fA4Dzb2O5bY2JO\nJXA6FsrrpJXf3unt4VdilRaQ00wDLzpsIYXQC1xgbuwjQuy3xVA06w8B+R0i\nPPSE\r\n=4w9E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICUru2OWjK38JBPW6aoZin7FaBElZnelkBEN6tXtld9+AiBeYKQkzOAweu0uyVPgVfEp+lDJwFCQQJeplH6BRA+HOg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.d234ec3f.0_1626458904448_0.20977004122505272"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5cd4bcdb.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.5cd4bcdb.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.9f68a932e.0","@material/menu-surface":"=12.0.0-canary.9f68a932e.0","@material/mwc-base":"0.23.0-canary.5cd4bcdb.0","@material/mwc-list":"0.23.0-canary.5cd4bcdb.0","@material/shape":"=12.0.0-canary.9f68a932e.0","@material/theme":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.9f68a932e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"5c053f1de07d32aeb409f327470360f0b5c02ae4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.5cd4bcdb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-nFjidDQNhIKd6mOKZ9uRIj4EAvg8rGLHOK8cQPQPjghMHuyDu7K/ZA3NBJK/kET/16dcStEdmcDyyLIFpei9Dw==","shasum":"8bf363dc22af23690a60068fe3885eabea91fd61","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.5cd4bcdb.0.tgz","fileCount":23,"unpackedSize":107875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8fZOCRA9TVsSAnZWagAAVFkP/39m/UM+F3bZ/kk/7wTd\ntuGGWDrGTNobD5qmdXDooZQ4Kiz7ObNWZSB+X5HCTGzrO1gptzt13rIPSQ+Z\n3a705Mi2nvipR2mpA2otxIi7ZcgTUaOYXhGlgjat7Uh9u4pIssRz/rnV2PTB\nQ0qcoAlSMwshcK7GjzHTfJ+MaGoWrS1XWVwdWJ6wvvRxQxdjY8651ihLPV34\nedUk2dXjG433plnEfd79MwJu+C8kn1lDIsmkoz9eF4fVdAr6gJh44xtO9n2a\nwn9mLO1K7ySzRv3rMlKklBBE+ON6x3c9AhemCCPbxok0svfFZlMVn2HLIwXA\nski0m2tP7PI+QCwE8qcOJmOCToHpxk5OF9Kv2TZsIb4wG31lKuNiuj5uGDaI\nCsnT8Zj+BNRGWYmb4eTSA5CHns32tTJnZizEVmkU4O0Wek4gFodJdlsqvk8j\nh3ynp9eeCBpNxI95b+oSWqsSv0JFRxsHTjslaTPDNnvSsJ8wSGxDBp6B6Ky3\nnrdEx+JS9jM+2re1kF0vm8hql5Dh/1AYKQ22/JrhmXPaGiZ5AdSU2U4vhHQ9\noyEHmy1oKuCHLxbUiXe8pJ3V49hTbTMnOtmPNAkdBEVmEvAsunTSC9uqmQjC\nJQ2a/qH3GmezJglk0zgtAcB4nlgeXqphkRg72mxe56NdrpM04UCJxt03KmdG\nPBAs\r\n=HblI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHmMMTJyDkvmnK94jbfVdtCRy1Y9zONc9Ia/BBA1Q4ZrAiBZ8d/GJR/uaZHYSHiCsNHerCqxxUvlw2D10jxyp727qg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.5cd4bcdb.0_1626469966279_0.865690522253286"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2b133cb2.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.2b133cb2.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.4d95812f9.0","@material/menu-surface":"=12.0.0-canary.4d95812f9.0","@material/mwc-base":"0.23.0-canary.2b133cb2.0","@material/mwc-list":"0.23.0-canary.2b133cb2.0","@material/shape":"=12.0.0-canary.4d95812f9.0","@material/theme":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.4d95812f9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"72202d1bfc4060bef4aa100b9593a5dd27125d0e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.2b133cb2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tuUrp1dmD/OR5JfZFHhwsBmavYTfjujMKlR11+hvcfdiLzCgwvN4qFjd/ou3U4nowmt72ab/vfGr0zUAiNVuug==","shasum":"fd6e133bec121c9a55a3f3081ec27e3e9dd9d521","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.2b133cb2.0.tgz","fileCount":23,"unpackedSize":107875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8gMSCRA9TVsSAnZWagAAA4EP/36xAtwe5gCSbZyJ7J1F\nJboIZsjOC+yjCsq59FSeFx7el7ShIwaBMCWQjQ5si2zl22w00CdFl/QZIOFP\nL9PCdJun57R9qq0mM9X86R+kjsS0f2rn4yrWaNHhDbnm9AalTlL0/uHd3QbZ\n14tC19A/dcUS+oagBPTFF46bCaPNaEsxTqk3BAoRmlSsH0MjqTMWLtNmnhG3\nMhshJxfnvAGBvWTPQJuSrqTY5b7ssEvHibEooXipoigc8SC1bu2J0Mfm+wT1\nxqbg37ssD47zRInYKfBxbgBEcmytpmjNuRuhAHVo7BIL+i0pdQCNTypZyJtc\nCt/WFckVYPb2w6Y1dQZypWSSm75K3jMkLPokKn90fvVbKVusDVSzvSCj0Zf7\nAZqWbhQNBWQUXL0MK4b8FTHGjtTdQbdiR4NzD5Bc/MVZ+QpYpymF9c26LWZ7\nZ/0Uldq8HiIhrQwYZUqFuDOJRbMYvFxMFCZY5GsS1IAYDDjOfdL2uPofGVtc\nH56MQBJrlnYCjpZLxsDA09byoZSiw5pe0qqptRemOkjF2/x/9HHcsfiVhyBa\nUu1C8FF/Mvev0OGUOiBuhvoszEpcSezKF5KDqu8hx8eHxvtLR3c9ic4h6EFi\nq6JO4fcLY9AxMt5YuwVBbNbMwuTkKCNUSpu6JUFOwgN7A69DousnpFJyBE2+\nIHW6\r\n=qd2g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDy6ueKHPOZLv+kTFcJ7MHUXPHOgO2VKJfoAC4JTfdY5AIgfr9SkCWKn2x1Zu9Yu2QSe6yZYF5YpqlcG7DunOBHGzE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.2b133cb2.0_1626473234828_0.7896816636650874"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ae4f422b.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.ae4f422b.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.4d95812f9.0","@material/menu-surface":"=12.0.0-canary.4d95812f9.0","@material/mwc-base":"0.23.0-canary.ae4f422b.0","@material/mwc-list":"0.23.0-canary.ae4f422b.0","@material/shape":"=12.0.0-canary.4d95812f9.0","@material/theme":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.4d95812f9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"8bddb410bdb60fa3790691718471a6b49c3f8765","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.ae4f422b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-I3oY1s7mmNSNHXq2X2CZOGTEbkNAllw4KTZsb2OQlbL7PHfd9EiCrXvP8JvOBiTIApsQ3G0uSnli6flnYLUO0g==","shasum":"bfa03857d7176e3d497ade49aedc5af5344e4270","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.ae4f422b.0.tgz","fileCount":23,"unpackedSize":107875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8hxCCRA9TVsSAnZWagAA5+wP/jd3oTDEFS002yA/tqMN\nx/3VrlPyX189wCF+LXKJy9WkSOnPyG3i5RGVKhc0eRGZFRDcmOlL8Gq50C5G\n3qisKR+UZ27oHY62rvUKWwSs/mNM65cILuWJeILHgGzoxn5NskU7bcraG0TA\nsm6w6ekds7C7QE1E3KIM4EqQLpoGBrOE1j4gptiBr4Aqy2jn+d4sivTnG8b4\nw9t0rxZLeay02ia5uEcNN6T5dpRkmvvWoQI8rCzIydrMlQBGcNF6JXhltIET\ngcEtS/zKPN9CaYUaHpYBUt0+3rbfml+D99Eos9He8CblvCkC9p6O1lqZL5wP\nz5099oj2H3DYE/f1T/oRG2fHNAtOJf16GnEZQJXlVQliglUVlHl01xfUmgkF\nP2OGutW1YuR8lRkZseaOz/0+LV5iD87kYmrggcxmZKV5pFx8bOb7qjB5GUIL\nnWYsHLzmix7Elflcsaac8H8RYAvaPBpuUFLuQxZ2b1DVVwPd+8oAnB5mrd52\n4wCqCZTV/1vPLy3kx+QQ9ZAeStn7f2i6ADxALtJKFPWYdlBQ0+xobuCu/hdj\n8axOMIjn3HFEGD1B2yrJrqFabdtDbVLcjxpGL1dgt5B4mzM7FnpOse/qdrTs\nPH8XYGSRLFcWj3Uh+2q/7zHw8vAGORJINLDrHalQK/hlhIyUMrxvwuYUyFzM\nKF9h\r\n=1qg0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCzFf100Oij0251mJqZkYc52uRowO3pfkcVLzoRmaFOwIgey7XdTJxfjuBjqaCq8ovtETg5JVBVpwFxNnPTlC+JRs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.ae4f422b.0_1626479682612_0.35979747586535327"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90ff8057.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.90ff8057.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.4d95812f9.0","@material/menu-surface":"=12.0.0-canary.4d95812f9.0","@material/mwc-base":"0.23.0-canary.90ff8057.0","@material/mwc-list":"0.23.0-canary.90ff8057.0","@material/shape":"=12.0.0-canary.4d95812f9.0","@material/theme":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.4d95812f9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"f90c69a94171ac1d67bd6c3315ba759c0e2e79b7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.90ff8057.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-64a4AkmQpDzEDprvRdmmQytZDhgKJHwDKCgUMO/jJkmm5zloy6L2a6+3knDIKtFQmDdzRXuMzFeUggQCL9Q2ig==","shasum":"4250671377e3c7c1e6630ebfb98277463df51873","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.90ff8057.0.tgz","fileCount":23,"unpackedSize":107875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9YdcCRA9TVsSAnZWagAAskIP/jF7ROawHogn4BgalA00\naQFWa86X0BB/uYIlXa3lm9N8LYAT7ol1kOaEfnXr8IDXmsPNcdVmGZjEaxXU\nkre4Vt6fsusXMQVYaQezb1hV3s4XiY6JuCNiiIa8fZhtsXblXDyaDkA6AjeA\n6DrdFzXNUUif7plhMnAXv5dFmbo7Bl80cf5aa5eU3KbUCpCqkaPQY8jzyCNp\ny9ADcbQeiliQDhTPTxpWaNRVWgSzHCQedr1/LoDlAs8DQo/IfrQUja5LQph4\nkmGFoedf3BCsZqpZkcl/c8RMSS2iaxrR1/RFcl4Mnqxc8MrImwIrYFFT0C5F\nUhh5VUVm/cXi0Y6qNl1hZz659A0tMh90w+8ZIgSBvJH2zCzl5HVN1gBOXN4e\nsTPRm7XCkbfTbiQsfir9BX3fJnSOQXyU3ewfU9RCNlwTmDf6ejpQIUqzdjED\nStaGDRDalu2/uFzUn7LIsIpmjwGsWqTkZ5u29my6kClOPVJt9/vqh0BlpFgM\nQae9NGb1HqT59Y0kw2sF9tKMJAPoN8993x971URTcDVE87/6GnbsjOAD1v4z\nytPGxLQ5J4E5VgMaUqPFDc+ePy6d+hSfjrTvAhw0zZhhZehXh6f3YeZJvXUB\nr9qinON6VFvVqqxemijzWDglk1jzcPSj5/XPzFnuntwCkbgR6I93zNcvbvJ5\nIoRq\r\n=cyw6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDB2qpstzSdL7A3it4sRqpqmnalYlFRCKZXHb524jU0ZgIhAPWmP0AfTyo3s258mgQMyOUkchrB9Li9uxNLs4Otg4xB"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.90ff8057.0_1626703708202_0.007085948300222578"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dd7b75d1.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.dd7b75d1.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.4d95812f9.0","@material/menu-surface":"=12.0.0-canary.4d95812f9.0","@material/mwc-base":"0.23.0-canary.dd7b75d1.0","@material/mwc-list":"0.23.0-canary.dd7b75d1.0","@material/shape":"=12.0.0-canary.4d95812f9.0","@material/theme":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.4d95812f9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"b0752e4552aba84ad89d4eafc1a2a995bbfa0607","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.dd7b75d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-A8Tz3EV4EXtoaOze/EvaUVpQUizQQ7AjpmLrDu7o43kPnS3BjhvEWlvSGOtxab7LcO222fvSNpKq7DwPLvBAaw==","shasum":"2e07b6cbd83d7d01bfb930a18143c45bc76151c2","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.dd7b75d1.0.tgz","fileCount":23,"unpackedSize":107875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9bucCRA9TVsSAnZWagAAt/cP/2hwWr763Qkd2tu7Nbsb\nmFfJ+pgYgzTb9/vNqVOpJYKWktOnndLSTuACWR+4EH0ZmyNaRl02KgpQGLel\nzyTXa8n4JZBul1vA45aQFyp3+BDyIWjgrZciV0qZeacjzTzAWaRHKz4C2lXV\n/TUlQHp8IzT/tDdOOZxKoOpqfVvFugF9uqy4iEB41SK8puj1uSaMJduVRsEN\n8n6N8IHwx6yt17/USYv0sqS6s/8ZcAzs8Ri7mTYC3BG2i3Xo4sQcZa0BpJfa\nHLH+wf5OHdMq9aRPTIm74vQ5JKMcCl3y1zh1WS2M6iucnCRC21110a8LuUJ4\nBZClAjPf2jkMYvrh2bueE9BDOyPJqbGCSq2/vMkbk40pawiYwVRqQyRHNZBV\nCemiN1uR2uxr/1yp5hJDEBJh40s3c9zEvglT2obS2B2MWuoH+oV8lBjRUXTA\n29FM0Jd3A7VTNHuYqOT4gTTdhbeW9b5aYq1loULPO/gfsfWJIGUoidkd/pQE\nZy6mLhJDAgj2Z+Dq4ny4PSqgyl5ypt7bOSywmHv0bM4F+5CzjbggW2ocGRsJ\nYbisV11oYuiMvtBHZwrPnXS39kvruTxBHe6SNEzdtFTHPG6s3kcGtALjfgtq\noTHIdHaGrje2eLC8R6ehZaqhnKTKG5CWMfSVYqOhnZ5Ip9mtNwqUYHoQgFHJ\n1F09\r\n=WgXf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHUZmSyGs8dMzNGq5wVkhFc2ygarqOVPxl4VGk2jBWuMAiAh14vDliC337iK+KC6tehW8OQ9zdeLQzxSnRp/6DR3WA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.dd7b75d1.0_1626717084687_0.4416256985109528"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.104debd5.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.104debd5.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.38d1846cc.0","@material/menu-surface":"=12.0.0-canary.38d1846cc.0","@material/mwc-base":"0.23.0-canary.104debd5.0","@material/mwc-list":"0.23.0-canary.104debd5.0","@material/shape":"=12.0.0-canary.38d1846cc.0","@material/theme":"=12.0.0-canary.38d1846cc.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.38d1846cc.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"9dde76584b6e4258f93d65b54a1f9695d2dddb1a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.104debd5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/e8RANGDDmkd72N6zRF/zL/0CMRkhxKgFWC45ymaKp5mLE7r7nqYI0C+NrWvZdxNf809WAR5CVjXiGYuiDHlxQ==","shasum":"70303cfd53f9222acb50cd651a71edf9a35bc445","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.104debd5.0.tgz","fileCount":23,"unpackedSize":107875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9gKWCRA9TVsSAnZWagAAgakP/R+cCiuw0mnLkR6IHNLd\neQA4gTR/D0XcjNhvGn0YATE1LJIKaNHzgY91H0vU4cte+k71DFR+cUA38h7K\no80LLKnpHtKpQUgu7QbYcppdZDBdOFXGQW8xCrZPh7domaNgT5ZNTu+B5ZSF\n1VhQTKjrCDESTaRlncitLusOX1Q3c60APj2FtRkxsi2GJ0PEsJBYjd78m1p7\n6HnNiHl227JKgg1hH6tF/lRURSUD3emu18xaLytG2yQu421m7uEU2CHHlRDY\n1Pounx7haYRHKV0snjyneOWWeFcD6Ydtgp3tfiuXjR0Bxsncq9ygeF2x3s84\nPItchJJzivjNfL2Lt9tIs7nJYqmtMp4HlSjZfRIGZXv+LVh6EWhYozqyE/e9\n0Gu8NTaEtXk7ytnC91bRxZEqh1MLH3DTaNecV1ocwcVprmo+fJIZa01ngXpt\nx/2F8LaXt8NCHvj/Nx/GIA+s2G/S4O914qjJUni7d8lOoJksWD4XFcneKykI\nNQoXF1BP8wc6Wy1aXIBrPAJzH2c3VsiHdaeJAQnSj2KNyf8SOdnoqNNR2MjP\nyJZBhjey0ljAwnxNqz9g7qxdOdbtea6Vy9dXsyWAYVIlFOyCK4KU+prZ0qsG\nFuSPxh9sq9QDbqgj10AqKJtPZ4fjyRJZznhg6IOMn05SNhPf0lj8EAnkn5XM\naKJM\r\n=TjEQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH5BXHtMnGdFthUrxG7e48ryaqsP/KBUwI8g8/SNIk8EAiA4T9xl9QTyxpdl/qd40n/2txToFq8Z+//9412J24fQIw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.104debd5.0_1626735254749_0.04305308709585631"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4612705d.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.4612705d.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.38d1846cc.0","@material/menu-surface":"=12.0.0-canary.38d1846cc.0","@material/mwc-base":"0.23.0-canary.4612705d.0","@material/mwc-list":"0.23.0-canary.4612705d.0","@material/shape":"=12.0.0-canary.38d1846cc.0","@material/theme":"=12.0.0-canary.38d1846cc.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.38d1846cc.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"28f0176f44158c2fa7246b69d5737a09425a6e4f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.4612705d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YLUoB6f3sZyVnORuFKB7mmorPVKjOtqBTOB1aE5OOSdJB40p9F547SpYfEE+yam6HVpRIsyzF6/BMHMyLlU4ww==","shasum":"56ce9242f7c68fafdd965ca96d8812272c55aa31","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.4612705d.0.tgz","fileCount":23,"unpackedSize":107875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vRACRA9TVsSAnZWagAAbLMQAJcb9IeE+ZpsyQYBM8gV\nKYYLq864dwCrWdNfLZdKjW1Iv/jk/3ayDbTJfBR8pgNJ1pYqPm01FmI0PtUl\nBuqqL/nF2W99K2/tBxs2YCqv/sL1JNEQKsptS1VxFgBbGlSotDnRvQ1Ux3ui\n4mkbxy02fviOsWPWyHnY2VUzWK9jvq987DeCZHv7TkAswsR50OKIldtWTVOz\n4ci1mwIgEto1YN5Spa2IHFZM/SVQ4FxdzZwz8tKqS9WSUl3b+hz1f77fITEE\noAZauSfSi/EOCiuoMIV9hXf3SAzrPK+mHvwahUyCYq+0nYkTbp8sVmTnYeln\nK6zKb3GzDnNxDcYd6a/YEWS/zbWlSF7iR+KWma99BhG1wrx1qxrHWYcw5KQA\nfA0ACnADZi4sciMiXN4ov4MPB/XXN9HlUVWP6Z52KRmaTsNlOofcXIpS//Aj\neC/zUiiCE+cUwvKqFe6GxyvR7aIw9ohQwBUM6rr/bKdidBPxwi5doWXB4VPi\nF76d282hsiQa8fW4OP1keYuQbnIGBFeTdGkJ5ZFXCmwyZ8OnG7RBGJVMqqFH\nPehS9DxU34dCdjANv4+xoYDhzEyu+XdBqi29l51o+S9ecUsh3qb7bbm4hbpo\nlF/KkMBWzor+vBBPRKT7wwu2BwiuGyL1yf1GcRANXFMUvN5yy/MlMsVF4qXF\nHDbM\r\n=5X6V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEfZ6jVSJzpOHb+MSGYlGM+LW9S46YImrzHOGpZWBvUbAiEAlfXj663XJbWRT9GbZhf9ninlYH0OIItqqrUptGkjRpI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.4612705d.0_1626797120454_0.015718289512442585"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.b36502a2.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.b36502a2.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.6b0442278.0","@material/menu-surface":"=12.0.0-canary.6b0442278.0","@material/mwc-base":"0.23.0-canary.b36502a2.0","@material/mwc-list":"0.23.0-canary.b36502a2.0","@material/shape":"=12.0.0-canary.6b0442278.0","@material/theme":"=12.0.0-canary.6b0442278.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.6b0442278.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"1df0a9b6912d747311691d2320eb16519bf8c660","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.b36502a2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-t6nZykFG7V6c9EeAXo2bg7Hsg52XfUQicA+BVR9sBBElUT/J4AkwkKXsrTmRBA1w83CCjv4T5DOZylvj2h83tA==","shasum":"da6f6ca60b02db76cf38dbfd9aa1e953c67be4d9","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.b36502a2.0.tgz","fileCount":23,"unpackedSize":107875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+KElCRA9TVsSAnZWagAAT7cP/iJ7PW7TpzVBem0ofjrb\nK4mLcJHFrBAtLugmS7g/KqT11crhbWQeVUmd8p2XIKwUYUKs89o6IHzL5FMh\nrw9isV/BB2CIDGC/zekr6QFeAMZb5cQbfMiQpK2C4XfAaGvjh4aICMnvH48E\nCMfMnfcJTIKRp7mpv+VY1ZB3RKMIgLzQpsWAHqInRM7aa/r6GASoK+zbuhIm\nAiAzJOy7pTrhQh0fjen5qOJkHlurRGtsG37Dc5pacVhsQ0yWrBwDYF2327pV\n4jLUA1EF09Hlk+TtQGuvqsagfXd1GEQSRADbmTLSlTGv0oFa9z3nWrBJHMev\nU6+eUga/C/s0WsI2pTtHyFROPoLMsv1QCEqtSvcUqZxItE7ndRmtBVpdjMwk\n1Dd+2ZnJfuehVLqWbQaF/jTDvpb2F8mAV3jJmZqaF0rnek+hdJoShIMybZV6\nS6kbeSZI4mgRUhE9OSMp9eZKYbAGqCJgCJNnuytGhu2PAGUctGW6a1/rVM8m\njdJhGHNo5zVr1PL2k4mpl6QVaxNqpm+zfqXP4VjQ5tjJRFpNrs+FdEOf95ia\nzDvOo4RKT8ywpzXNGkCzJkuyS0TeQopcHeprDCtM4h2Tmf80irXScJ3+lkHg\nDK3ZaFlnJbuCkhX0ndkTtGYzpTQLBLXGu38v/4ZmPeyrEap2xAvv/wIsa8f2\nu3UG\r\n=zLbt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFQ1qormIUrpwL196FGxuymUJgRkNYAQcsLvjTpXojDgIhAJNxABdCv6H7VWKbxt9cKXc0YtnBjRqEVtKTt+7NzQkP"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.b36502a2.0_1626906917725_0.17626232633310912"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2c392ab3.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.2c392ab3.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.6b0442278.0","@material/menu-surface":"=12.0.0-canary.6b0442278.0","@material/mwc-base":"0.23.0-canary.2c392ab3.0","@material/mwc-list":"0.23.0-canary.2c392ab3.0","@material/shape":"=12.0.0-canary.6b0442278.0","@material/theme":"=12.0.0-canary.6b0442278.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.6b0442278.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"83a61c9efee1610d42af318683fe4985effae0df","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.2c392ab3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ES2BRpauL50PEIJ4VKdC+UZLm8gANYc1HobeosIFUObMwhZWYIXZo+ZqTeSZJt5VqKwMDunSWLfC2IaIl9L9TQ==","shasum":"124f9c27c60b9f6e4be53998a1533eef0476d99a","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.2c392ab3.0.tgz","fileCount":23,"unpackedSize":107875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+YZwCRA9TVsSAnZWagAACxkP/0NFQXwIJxjN/C0S7H4j\n4WN+Mo8z7/UjEziUuM91o8g2Xr3je4IcRA9h7TfOHyhzJodsINVLu42HxXKu\n6EpAvltPdINv5Fzl5TFLBEzMWCDzxvNL7Ppild5/WLQQlsDlAI0I8T2uDN3u\nfFfKMAxzkjnQbgrtZnJdtdHA1Q2RkxGZ6DI62BY+LcDko1lb2mWVU3QJ7v5K\nJfhYhxVHQh57fNKBGHtLb5fma9PZggcD1ZuA5YtBGe8vWtYlIfpT10oy1cXz\n2dMnF6vm89T2at4dWbW4W22rvJu49YPGxS7bUFl1A0E07I2JxP7qR7V3J2VC\nJkN86DKcrfukqXY1bU5NS695/LYksdXI+SEET7sSV1cKiw2s2VWt8FikfqrU\nJrOntu6Yx++LU8QA4Asa2V1GeRM7S8k999bB/FwwnZ3uY9ecxJhfM5EPJ/27\nYR3KqrUILwPi7w4hB85YoifoZ2k+qyon1aeltxJ3Ywkv96+OGlKA0vxtCQf9\nddu84gpd1x9oIUAbGhNU9LFbNTmjvuC+RAhY1iBgCihe0/Pzq3KZgxqfX6i7\nppnPXdOCcGZGYgMfVZ7UHt1nm9tFjO2c11JJEhc1mXSYqIM7S2LHnisfrrEg\nj5oWL8x6UIM0iOgvnYO42iXEsM90/r4ULR5W666kpiH+WCCWnh1/GTivzZxr\nCL01\r\n=M8C/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDe7I5z4XC3SliDNmjTxoIka5x3Tc0odmSjNkjAD00ThAIhAMkXioqy/2FPNKlZ3P8GVe2DHlKcRcZfjGLTebJz0BAK"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.2c392ab3.0_1626965615857_0.1528649041008432"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e8bac95a.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.e8bac95a.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.5f00e454a.0","@material/menu-surface":"=12.0.0-canary.5f00e454a.0","@material/mwc-base":"0.23.0-canary.e8bac95a.0","@material/mwc-list":"0.23.0-canary.e8bac95a.0","@material/shape":"=12.0.0-canary.5f00e454a.0","@material/theme":"=12.0.0-canary.5f00e454a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.5f00e454a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"2215253d0031fb9db27cec4c40894bd549b72930","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.e8bac95a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-pB5NnFOzZydqd/4yag5cLUkh6AkGi/bccY/SBXBf48+Jn4fzt5v55TwWKcis+cHSS7TtZVhF/ukPtcihzPyVjQ==","shasum":"111232dd0ea1b3b718435207988af5ef79422e67","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.e8bac95a.0.tgz","fileCount":23,"unpackedSize":107875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+b6uCRA9TVsSAnZWagAAG8sP/2HjFBwILkahPSim9Q1u\nK0xE9J16MEQaMf1C/8U3QeCXAxqRDU3PgWgJ9VAwJUopKTwe/fe8Ikwg5giK\nSnqPfNfMB5qyfVfWWlxKUaAeIJKMH2+CTFkekp+qsErrPVA7Znt6SNKHThfh\n7Ll4eIr+wy5DyI0pwIYmi0KFdzezvEO37DQuU3evr2/5q5e18SG6r8sjcezR\nTJvYE+X9s77trPnT8YBkIUMWGjWyp84BXzStLxjrNOIBt3ntl10pkX/jm+dV\nRM6PiAfzLzvwqg4jpPZi4xjEhFdqJf7eS7VDZS8LCTaNUALhVKIceQjXvkL0\n9IySQm0dN+Ncf4J0JnYrXcfxxBFa0YYiBz1gbj6WIVBtZaQHE8Gt0ZYwCfNA\npEBym0OW8SZU8Y0AyxRXc+w0xAwJWE3Se5rJUuw6se7NffNEch13U1Gthwwl\nWoCnsrZsl00/aYb0WAYj1kbol7Ppc0EbyTlXMAQbIw+SBpVeUUD1SpyUD9Ky\nj6Zic0O7Lp6Dukh4K01D54lY6OUc4Xv3n+aA/oNIDpLnzIzeElIQd4NNvbyk\n28Q2ezEgTQFGHb5CSKcq0qMQd2yVaViClnMC0FCMViWDkSETKqxIc/RcthrP\n7wCTSZ2ja60yN0rI00FWs48XJPP/6cajY2/qNnYAD1Xdpjkwlj8UGK/ciqGa\nxpwS\r\n=ggpg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkqMvHcYEG0uNI7M3jVvGdbrzG3gSXMZRotg9Yphom/wIhAKWoH4GCoO6Tzzkjp0RGciPNi+jag3oHxl5+XzcnOE80"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.e8bac95a.0_1626980014000_0.35857103203961516"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.38f29f8f.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.38f29f8f.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.90e08fc6b.0","@material/menu-surface":"=12.0.0-canary.90e08fc6b.0","@material/mwc-base":"0.23.0-canary.38f29f8f.0","@material/mwc-list":"0.23.0-canary.38f29f8f.0","@material/shape":"=12.0.0-canary.90e08fc6b.0","@material/theme":"=12.0.0-canary.90e08fc6b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.90e08fc6b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"484fc84b540f757ad561dbea442c8566694496a9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.38f29f8f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LKESjACZ2/mUOSFU2mMF/RfEN7u0EMotrcULyL/muBjdVd9Gf5IGJu6s6HBtKmC+sOzEnFPH/l6jehoPLTKzNw==","shasum":"a3d1cd57e12cd473195a3a6c95af2e3b062ecc4a","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.38f29f8f.0.tgz","fileCount":23,"unpackedSize":107875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+weLCRA9TVsSAnZWagAABpAP/jC/YZDnK0laaVLe03nu\ne3YUwJ99/ERsLel96Vz0Z2YlXmVjzRPhBcTxnX5RxHohj+riSrRW044/zrs1\n3UVyEtVmXZBhORhxzmMRCDPL19O1hAAcqLL55XOXF5g4e5e2IyOlhVAAdzBJ\ncXoIRm2SsxZOfb62hPxZ/t0UM8UkeRgKJr35WbPLACgfqWC9EhoqbxdTHxAu\nRLsyF8ksS7VHykw1puS+ATJGd3wFdl89ebleLdsqk53tRk0mK3gWePbcT6c6\n6oNYXfc8xGvbTL1Rjhfr/zixskW0hmZjuK+vZPHQmUteFgfC8Zq/Rh+YHOi+\nmNxU9JWET/a3OYBzaBTqrkuECULPRJCJAae7DffkaxoAENmhIqI/X9oFeEZm\npS4H98XUGok9MaxXnRaoGOlz9Qr3eeI/vNiKEH/9xt2cGCJvC14OgZ7CY9Ce\ndq8LEQqBJDS8IOTCMfPIUDYRJ2zSfwuR6Qb9oU+GNvYAa9E1rt2p+9wqjHfo\nXPEUNo7UUFHtdYwg24aMt0ytxEvGn0a3giNYPbRy0LSHfOKvSEpKEXyKrY5X\nDSlg4LMTYppH6Ef5/P+ZY+ae7YcEYf1AFA+0jdmIYByr/cvUWfHcdl75+Uo9\ndPStJYHVhG2aIvkIHCNfeoXJVVPbcazPaJ9KqkGdhNwxeJ3TLf1PkmzjipnM\nkCnl\r\n=56/u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEhWDaeToAano7RTA5W+Ml9qDluAjyAt7PWXwr/9mDk+AiEAglkLmbQ7rQ2Sr19/RnR4MK5TW+pS8VhWMUMO1aNIMk8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.38f29f8f.0_1627064202928_0.7761680958343922"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e0693475.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.e0693475.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.90e08fc6b.0","@material/menu-surface":"=12.0.0-canary.90e08fc6b.0","@material/mwc-base":"0.23.0-canary.e0693475.0","@material/mwc-list":"0.23.0-canary.e0693475.0","@material/shape":"=12.0.0-canary.90e08fc6b.0","@material/theme":"=12.0.0-canary.90e08fc6b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.90e08fc6b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.e0693475.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0oB+OeEhRbRaD2aC2tC6clxWCmVHcc7z39aO5zb1ULjKctUD3+GKS2W2uzXLEC6eN48TYc7XaKfXasLGEuun3Q==","shasum":"3db1bda12ca7bcc83b4e98401ce66dfdaf2d231b","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.e0693475.0.tgz","fileCount":23,"unpackedSize":107875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+xD0CRA9TVsSAnZWagAAiOMP/RLpZYLJoUrt2K6W+DkH\naOVqTSfOuFOUyYfPfA/N5CLH8ZkAnchDZR/E5+KaA6iuWIIz8JQ9ojajj8bH\n5TFzHtj0/pkwbfcRGEVg7yyVQ9AuVl5fB6VUVUSfA+XzfqTGGQ9vsEaYF2hU\nYr79m+NHGt4Tq95y9teNu92q0Da3v6PnNGo/vvNpObogEy+aLvwcI8iLt2Vk\njEaNhoEVIA/619VP84Y/vulB+3jTqXA8rJLgCW+Nl7hesNy4N3unujSupyLz\nAHboMLOyMG8ckHsv7r+duSTzZzdkmBMMbnl7Iz36/IVGSEWEj7E/ndnsVV2F\nXwZSwZRAG4LtJU0RfOPmurnhnXNvU0YoFPxUT5XunrzXGxd3b+pdxlhqVJlz\nQiDBT7v+4JoVgfwfjCuSi7l2GmaMWrAD8ts3pLhGIpPCfXLqVwEgc1fq+K+l\nBu6GtSndlHAspnJAtrLCQnoI6PH3OXy8eg8J6x+bXhP8Qya2zCFaHxhr+aoV\nlZCO789kQRlNKyWEeBpyHNKFtiBWalMMr+MNNCGvJdlXPbXAFen92GvgZqnb\nWfjyqrk6sf/GJ/lPsagBv5apP83oZ8oeUbK34MSmLxIeKKhoLeRBawUdfnHx\njObCQ4JSoTH0DEy++dAGPOG1CeWONs/t8ZUAZxQiqr04UhmaDgFW9NplmsRO\noGza\r\n=0UgA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCimM4dJlg/khxApqdU1QFcUuwvVpI4xPsHiaCmKmQkywIhAJzGQV3rVQrMrmwpx6RSPjsaZtnu/uVrP6fdqrad+2Nz"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.e0693475.0_1627066612748_0.48372789542223127"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d595e030.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.d595e030.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.90e08fc6b.0","@material/menu-surface":"=12.0.0-canary.90e08fc6b.0","@material/mwc-base":"0.23.0-canary.d595e030.0","@material/mwc-list":"0.23.0-canary.d595e030.0","@material/shape":"=12.0.0-canary.90e08fc6b.0","@material/theme":"=12.0.0-canary.90e08fc6b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.90e08fc6b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"7c8056c080cfa8a28ca6e2a5511b4db50a604a87","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.d595e030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-egX4UvMFPgmeMwf4fljx7DPmFUd2Me69n+qLcyT2cnjxzZy9NOrWq7FKFy8CJh1wUKcw3VrHeqQEzfRJG75RzQ==","shasum":"5743cf75f815ccf7d106134cdd4c7bd3a1f65e49","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.d595e030.0.tgz","fileCount":23,"unpackedSize":107875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+yxhCRA9TVsSAnZWagAAaioP/j441GOQVKr1yxBCvk4b\nAu/OMy/3kQHQxwwm7vgPY9mN9MSEk+2TaggTEip19A6fwrwB4oMx6vbKUe2o\nAjh0mfERznL0rtdNJ33+QFglStTsI/k07VpTyu1VEDIdRgSYvjNN+D0CNK3E\nBiocEYcApIawK7bRProyZFHxVVo+vhqbQH0ql079mjebjdTYndKpwAqFUXo+\n6Vr1YsKbUC2WR3N6CZso4wc1nw6O6gttfzHoBPHJ6wo/Khq89wOLoYBaxCX5\n47nOY1sv7wV5SGCVskmiq7G5aV7UorpHUZpKJqcdKuxasBG2Jmkp0U4p7DUf\n8tEVfrN9iZBtbMG4KsDds9p28j9ZRQivEObKX2FT+ffn7xyQhHA0kBy8glMv\nw6vBvdNbMFTpSI4zHgfVh137nzujp61ZlFOO+uLr04WdufKjwn1OCrsigT4w\niAMtXEaV5XF5wu5Q+0Mjlga208wXzotV7rqMCLaAPfHxjGVyEFiJVNzCA2aw\nc5zIyqCryvwpzD8VcJkUgxBa4PgLQ5q5QuWLZ38fWb3wPk2pYq2JUJtP1DYo\n2NW/JG5MmVDvkpY0tA/SXHtcF20qNdO8xjF9sKj9/nfFC5QpObzSRYCbzk84\n9kyxZu4Q0T0XiUzB8KW0SiDbi9uNm+IBYp0pZYnxx/XFazpeSqnS5+tSkzzf\nzc3c\r\n=I814\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7qvjyVHVlOI/w2fSxp78250yms1VywiJ2OyA7PQghHAIgF89Msq6m9AIfYwya3RyivUqPVgeEvGDZ3tDO+vzGJq8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.d595e030.0_1627073633252_0.30651282507071254"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fe7cca31.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.fe7cca31.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.3f36ac75c.0","@material/menu-surface":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.fe7cca31.0","@material/mwc-list":"0.23.0-canary.fe7cca31.0","@material/shape":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"45bb0797db4a64851859f8894864015974863643","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.fe7cca31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NuhijyrCm5yIHQDKsGPXmsMLV6sVZWQG0kRjmbWGNrWM6a/2OkRtV4vraVNNEsXI0Aa483Hw+Ryo+LgAAOD20w==","shasum":"8c61b5d2cd5f2e6a812c9b593720d45c84b1cb57","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.fe7cca31.0.tgz","fileCount":23,"unpackedSize":107875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+ztHCRA9TVsSAnZWagAAnVAQAJ7iZ6Zx8MumjAjxYK4c\nArnwcZtilYE0KdVyhI+XqIEoehCZTeEeAVFcZd/TXm0Cht+I9bsQbmELxJ7I\nptwbESlHudU+W4ZPS/m27Z4WtK6t5y4rlcPN6tgP7olz+LqmKvBuy7xPFjWa\n9DEGYs7qQSlX2kIc2YrK6R5G1tTelxdedJkfXd7w3YLcbMZzimOU92N6cYBS\ne5bkYrlvavJ4W4NtAANi53w6fetEI3zjDZ3YuE8TDzI/8Lp1HXy8Oajp0Tvv\n51sZBaDZ2R4oE5mvWcAqqOb4JkO4xZymJ1UjXVFfp0nRLWFFg0vN6mZvuTMh\n+i0HToaKrphT5d6bcmAEHchn8mwh/sXTto2KHpoDnrSj9dnEaScB3U9WS5ny\nhn1mCnB3guEsFtRqisj2gnz+CfF9V/tUfYFNBLvaoGu/yhKMI+rpE3PYpEZQ\nP5ipxMgSXadifFH5h2G5MzhWvPIVDgNhXIeHMHA4EFF4tXXWWZHvRUxAPr5R\nZl2YSzzp+scKmU84po4D+2BZZBnf6vuCrU1zO8pWSbnk9bn2QYo8Zyty9BNs\nNQVSkQEc8P0D/57JCij6J0rEojqMEaBgVkRnn0LNxOmsb778tGUMeKdtobX5\nFk2VRu+XQyHRRJgYym3hbOzhT8s1L/I+rocJG23RCEyoatSpyEu8FzvYI2is\nFBaT\r\n=Jalc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+DVKcMz5tD8sWHbOaIIg69a56SZDKeJCfd8Ok6ug1qgIgDrUPAJ+JIk4cRDOoy7uDNQOXyHnYf/RYuwtgySh+q9w="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.fe7cca31.0_1627077446883_0.9363367549789965"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fd9da483.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.fd9da483.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.3f36ac75c.0","@material/menu-surface":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.fd9da483.0","@material/mwc-list":"0.23.0-canary.fd9da483.0","@material/shape":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.fd9da483.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-C6oTJ6nf+l/8jRGVzB5zRqImejYvuz93NchE1qsEdJUDbtME+qr+pr/a9mwoDvE17cGF3E0p3eaI1CdEog/fqg==","shasum":"57dda6aaafb1d8e18e70d6c4f6e977d2c0c50c1d","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.fd9da483.0.tgz","fileCount":23,"unpackedSize":107875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/yhRCRA9TVsSAnZWagAAHyoP/3tN9bOJFvICkoVejrnw\nRmNHTatuewShDmnXe4q5GggOsQXOvM0MW2BC501NCBOPFpp8550MZ3CLxPly\n9y5PnCi1RSy9LHcz/gZYmLeyuG/S80etlM/bDCCNmMwPmMNc3Qd7JKFDKfYy\nDKh7DEVkZOWTMSPtNUitFT7Bt71wySF1qIEVSWiG2mfX0OmT2LhI+FGrEyRi\nmSB7ets5PhOKBr1WNUI+nJjHkVrjfvmRtiq9DRu0SgJvRzvAGB+6qhPqiyUa\nte598tXJbvGfAaZin9DM+pfbP3bwfrRjYA40dHu4wrG3Tp99ipo6EdnysPGK\nF5kwwa3imQEDp83nh8topEHzxoEVRkDOZeu1Z1/qLCF5j0rZRJvCXqjIFexF\nFOWbdhmZx2mXVE/h2DqawB7/v/Nh/Q+EbOJrLvpC0O2nKSoWUAW2xw5obp0W\nCExqRQD/7ukNv028jST9vxTXAL3dhQ0EDSUN26HhYreN+lOrELHF+qJn/qGe\nIUB5RmxZZHFOasKe3mnsj1HQr2jTLo0cmC9LgIoAf7/b8xtX0Aw1c4A9nDCG\nhajvoI/TrOB9YEVD+0Qd24X+M+WtH1ZjWGGj78HnoPuvqEYyalYL1v/ku7+m\npK6q3ISaq+y97ura+gyvjXUr+wne8LQ7kQaxvTtM95NXqasYZHykKZTcE8Qs\n2JYx\r\n=11lk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3Pm1qNEP1OUVwdiKEZ+AgGV2wfmLY0XaiY0WzS2qdOAIgdJphILMXUGF9uWHMP5fGOg/SN3GxbN0RhhWEQbiTCOs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.fd9da483.0_1627334737833_0.5388755135552763"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.8a4c7e06.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.8a4c7e06.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.3f36ac75c.0","@material/menu-surface":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.8a4c7e06.0","@material/mwc-list":"0.23.0-canary.8a4c7e06.0","@material/shape":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.8a4c7e06.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-pZMHw+y6MUhV+AN5gQuqYIcbVbvQ0rEMAxEiQIl0N2V2wd5VswIVsQSeZ8hwG8fflHtoKhgdjYS2KLl/6Sd0aA==","shasum":"b51fe442973a9be2f0ca76d93e4fcb86fb013fac","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.8a4c7e06.0.tgz","fileCount":23,"unpackedSize":107875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/zrbCRA9TVsSAnZWagAAnAUQAKBWu9J7vRc5XqB/RVPm\nZYcqHWDGx7OeeJbPuKPg39+ivY65ps9damLlDhmyfsMys9db2f/6JhaxwUIt\nWP221kqfob8kFWcczqmtApfmmOWwPujYaHTcYEudNZ1xnaGQG3mK8JBmG60r\nuWEZrJakSIn2vWL6KW0EZd4nE7wk9Qa89acRcHW6RYgvEKxObed5u6e10XnB\nz7pzoKl6vnELD4X9Th32M1PqNilgCbZ0oFdmT54A6W3RlHx7WB1VbP+5WBMf\ntamPnRLlf6WrVUlokivQ3cXdGpY4qC5ORU5IWJzVbLRAT4JMgBJt4pnC4QZN\nDwaM1yhA0/HADAu0Echm6HWL88NUsHz11WpB57pR9U/NasLg1BDSMtQF/qjD\nbm5296PffUm1sT4RzffCJMVFxSdeLExv7LPmGBtVAeJSnVhev8xUv6YZ1PBM\nXI0GWa35cQ12AB8wNtbUb6ZVumnlHDjtSN7lYovsmBPwxstqVrUuGqheMgkK\nV34u3inROHV7ypzs8OWUbHNvHZcfnfRJqrEmCO/3SoCVMqmNTNp1kDTNlBaw\nXpN6a7JswSMyibmxsS2T99W2vH0YqRXz/tGX8tWNQOovFD9rcwenTqcbsCi4\n1IY842IfEEiS7PFoRQpBOtJBGrKLpuDkFGOWdgYg1/HGXH5g///PI983Gx1u\nI6yd\r\n=63Lp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICU/9CDzrI4YsYy2x2WWqtSCZSpg1XUrHF8etGWLX85zAiBDt8pUlw+o+XEg4LrtLf+86AxW5+509PvubZvthVRrPg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.8a4c7e06.0_1627339483807_0.40404871306545975"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5b395fd1.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.5b395fd1.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.3f36ac75c.0","@material/menu-surface":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.5b395fd1.0","@material/mwc-list":"0.23.0-canary.5b395fd1.0","@material/shape":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"49947c20a93de615b923efcb7d30a23250ea6dbf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.5b395fd1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8x9kATJDOzZp3u30sos6j44E11vRcGc/qek5ZktkqON3HroE03peF0UlnD4AAkUEj6zOBAXtgAxcEThuYhsojw==","shasum":"caa6c81613e49fcf42f62ecac76a4eb4418790a4","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.5b395fd1.0.tgz","fileCount":23,"unpackedSize":107875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAI5+CRA9TVsSAnZWagAALl8P/iMv8DTztf900b33Xk1K\n7cD1ZsS7PO0l9hUbYM9iA4AeSE5/pDMF/JS5tcaFV2fOLuEbEDXHma0r8hi1\n7kqzpMw/Y3Jq8yuMlOG91UuQXupEURZnFNxgHYTc3DDXiUkRn1xGqHBILMve\nwwrJqMf41ErIBWxnClcUHMBdkVACZwXGewxkoVyHQ6baFqc/SUTFBvF97ZYC\nhlFIiDqab10bnVx+b76cRPgbpDgJ/Xcf7zf3DCibuPMWf6J+NqukzisUHCNx\nGkLZwLOL4S2PAl4rtOZShfM5aKIT0wZ1dDXIpyJtS+FXtyUGkw/RWYlOMWrU\nykK8bhLOANaaqDKjCqRVUbpTA/M8njd2JZpUczp8Levl47tHKsq4PbVNY1za\nhlfg1Dj9hOWDLpUZInJfSM7HVNcz5IXjlgsGM3wiaIEau2n0KSRPvRRbFXZS\n1LoAtsD/KmNw/5t5sFCccI6WztuRyxw+TD+6UYuxOAjjLeCZfWCPzdUDgCgo\nwfEghYnGwjUNWlrhYVBwk6idUUg0lewxduqpi8C8ddg/9IjSXlz9ihUBjaJb\nY7Av2FyUCuM0ny0fc78AcVFIZPAOl/HOS6lpowvQ/lkVNKmwVH4a24HI9jeq\nR+MjaYoqJoJaKFIYLu3QJEIPQ3fNpBwkKDta84FRClAAxgfIYZpr1tk0elVr\n/MTg\r\n=oW8p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEcr81XYTu9gq9owoZEoTMSzeb2nS+cMOizeY+V8IY3dAiA45JFppfvKrpmnhOM6T5TW2tx/D3jz4e8viJjVxoDEBQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.5b395fd1.0_1627426429781_0.8358114664675906"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e5efdcc0.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.e5efdcc0.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=12.0.0-canary.3f36ac75c.0","@material/menu-surface":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.e5efdcc0.0","@material/mwc-list":"0.23.0-canary.e5efdcc0.0","@material/shape":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"6ce7c9ba42d6630a9af68bb580b94e6fec508bdf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.e5efdcc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5ckGJkXow8W1zO0PDcdcnaVblgjA5dgmxxPBiRedSLOD4XDosyZ4KxC8fVOB7Pva9ybtyQUEtVxCDBZXOiY0pw==","shasum":"9bf1693959091a2368564896ea7d82c10f823929","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.e5efdcc0.0.tgz","fileCount":23,"unpackedSize":107875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZKICRA9TVsSAnZWagAA7U8P/2XmXljOcs3dUa4zdgCJ\n/1SKEtfhG+EBDHsXyo8Wp+bp0ezgfsNAUNUWJjk5qn1z37tuIqqnm9J4b69k\n6LE0LqN/FfGSHMGAhyVsHrB2Mq1cZ/Fc6FOTNeCwmnmv2WwWsQEXGnWnHVnZ\nsvaH9gy0mTdooYNLkIx6hyDLR2QcCsYL/Tlp99eK8YLkutzItrar1TliSxI2\ndg0J0XvoUEY6amRCDIB6XrEz6oiR+6XXFBX5NaSU0H6nS8Bp/nYr0HE4XWde\nDSmf7ppSW+jjHUNZsZhgBSK27yC3/mzVOSTL2iNC7Dc28g1uPQmQXZKV1QBL\nb4QRCtwuO60KT0YFfJVa9mT3bxKzbg/8VLw11rzna1uUJ6+Yl4/eGsHOtB0s\n5T5Q7fifM3KJwsFfKl4AFaf4Id0uoMHzr3F6cbcNO3HIHZhge2p+2qJN9loO\nGv1M8sTQtAQvcWKIvw/YkNsxFqUpon3W5Ny965mJxvlbk7wZK8zWN/kaHLe1\nliSEGWahCxwEU3SlJxLy/KGM37XocGPRL4VAXXS4vpE+ADSbi7Ctf+pm+Y/R\nGX3gi/DgomAhRs4V4EoSlHr/tHpUeR7k+6xoeC47u5LOXfcShegl+hHIfHcL\nDRwniNWmGs5QWEfrWCJ8j2xGneI9tHaQ7ULedzXT3IH8OjA+Etpw6iD0NcPx\nFR8t\r\n=kXOt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG1XrjijzvDLRMXXCZ8hHiRC6SDHd/jRuqOsm0jTetvYAiEAj6jEUdxR8KCtZGweaCvtYSwEifNjw15LHT7DIrdl5tg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.e5efdcc0.0_1627492999999_0.4536122521000261"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ab310900.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.ab310900.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.ae85f7eba.0","@material/menu-surface":"=13.0.0-canary.ae85f7eba.0","@material/mwc-base":"0.23.0-canary.ab310900.0","@material/mwc-list":"0.23.0-canary.ab310900.0","@material/shape":"=13.0.0-canary.ae85f7eba.0","@material/theme":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.ae85f7eba.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"e3a3d97dc865cef9b5eee17c8842c3ef9be90dca","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.ab310900.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-dMCoJsbqdqw4PugeVb1/sSfP1pe8qM6k+im0AdY+AjWIcjTKdLJsSQ9MUeVNDWggrARdkOazfQLIG74aSvfaew==","shasum":"64d63c4203b757b7f9c3521a005d3f0f022c892a","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.ab310900.0.tgz","fileCount":23,"unpackedSize":107875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAbxvCRA9TVsSAnZWagAAG1EP/iN/z3WUDEPgxsImSg8l\n1NLEZ7ULPEiOFY+fE7h5vnYS/IiAwut2CX4hLeUxhUh782Nx1+Dl0MdZBEUx\nzqks9Y3pkU8bri/yLLIuKROJuywF/tdFqSjkE3XBkajVL+AmpfTWuVbCpWFS\nl7rzYCPsbB1B2UU2+YgTyZxlY1NoQlc/KDs0uqQB/C6aro5xv8dg2yoLqV2C\nIt97UJzt93Jzp8dyILpmJT9sYLeQeGke/yYGCJvEGhSwemEGGWUYksnEHdv7\nuHSDT5NURjt6qWAfGpP8CqCcbUfn2U7oaV5xNFYAZS4rXjt3Mjj1zgZv4XUN\nlm1P8e43EFDjaCJB3sAcs1ZRjeIKl9HsWGAfBz1BGNQ8MVEoVwgJ5YBiHXz4\n7LuCTRuyL7SbwnGC6BbMC6ofhVZg4sMQpKnQHPGDmLpYwzIqNdPL73j1IOzh\njraRo/0PB0FsUB/fNf+Sv6YUkJ3EIwy0lAqvZKTJprifISspjVjazK5oH1He\nmzEx+WVwv/j9cMNwrxIqgTSt/AiqLGQQrtFalHVn60+xS0S77qPFupsfURLz\ncR0gp1YH7B3q2in1vlhN9tmpoZiwaWTcLkqqSLqDFMf3+Mf6+M+GY8e3Tm3j\nkV3UrT4fMz/t71h09E2GoYi5WNRaJVAMQ5mb6AZNg+XgMXkrGtvWEmaZBwH/\nRY/T\r\n=x+Ik\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzJc9oOHtJM7W5Kb5Bwr6T0lM+jowjhdFzckPEMM3dTAIgFovmpIW2CA44Al7R82KYFWgPni8gHWMY+Re7vUK33nQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.ab310900.0_1627503727594_0.7481346710955248"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21dc9bc5.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.21dc9bc5.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.ae85f7eba.0","@material/menu-surface":"=13.0.0-canary.ae85f7eba.0","@material/mwc-base":"0.23.0-canary.21dc9bc5.0","@material/mwc-list":"0.23.0-canary.21dc9bc5.0","@material/shape":"=13.0.0-canary.ae85f7eba.0","@material/theme":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.ae85f7eba.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"cfae2d30a40b9717e93cc7842d29f51de61c497f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.21dc9bc5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8UD+D0PZJANDzBsw0YdIXKTHC+amb6sUC+sfKoCo/q6ymJMrgTbn4VonH/geVqMNCmiX/GlZ/doLlpSLxCVMoA==","shasum":"a1c6b2233cbdc9f81553ba951d0c83762caaf9cd","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.21dc9bc5.0.tgz","fileCount":23,"unpackedSize":107875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAb2MCRA9TVsSAnZWagAAe+0QAKE1yA/YHfiFpEzFe6XY\nC9CKWVSgbBwqJkVM72aea/SLhBvpMZts8oCK4o7+FmL8SkfvMd4r4cyGvejh\nQxdYwgj4ePkOPhkabAIQaLDe1jxQR+smR2euVT6qti/BvgrE7zyz90OoTc3O\nly+oDvNRy3JKZI8nPUriI3FtGCgCvP6oaJTo/IkqBaVXsCzK7w7q8ahtxWUE\nQe0zcHlAWYb7uJAT9B01yJyyPLl7koE61fqFV5BtYIUEu51m0DYej0wLYSf7\n6CZiw/7kkRTP7mYBvZ3MXmj0aqk91Jsqx34Rgjq8BvM2Lmk8mKGZZBSYo3Cz\nnzq41Tt14dVJak05PUQM5F7bXEqkU59CkdnaqbfFVQzEqPb2NI5JBBAlynls\nSFupy33rYiH+eB+bFzmGuKRB3VI2T34vjO+RpfYo3B0ModLmrM8T2dQtLIU2\njUf+SJ1AhHRvHvUnMgaz9NxSojw4bD5DElTcbfiP8YgiAdLXNWBahvItsj+o\nj0Ud+avIbj5OE5M+TduapCSfvYtagK9FhSQpxLsOko1bFzhb9gYZJqMziz/A\nu4qTrtMifzeGUUi8shqC+OKhruZoyFbXPPUK0Ec/U59/Jgg+qE66Eec23O7J\npiE21/LxkY9HZ+mK+1FpBXZDMcKer/6CUIa+lMkyJYsr9YP/dfZu/RGeESRO\njSP8\r\n=Eh/s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIETj9/t3yLWGPxIv0Yqo3dpf3mM1hW0nRSNVRrLxL372AiEAryUEon/QZtyKDV0MqyrQxk+eVbmpu1rhLts4lCS3VkA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.21dc9bc5.0_1627504012351_0.3216737383974926"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.68c7fe5c.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.68c7fe5c.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.ae85f7eba.0","@material/menu-surface":"=13.0.0-canary.ae85f7eba.0","@material/mwc-base":"0.23.0-canary.68c7fe5c.0","@material/mwc-list":"0.23.0-canary.68c7fe5c.0","@material/shape":"=13.0.0-canary.ae85f7eba.0","@material/theme":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.ae85f7eba.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"d14f788b501a8e9e77ec19d160f45c10e76e3a31","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.68c7fe5c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ahveQkZB8tGXgxQePWOubkpRGg+QU2kioxcI1yD18Tk2UAAUMCt3BiFI8KEon+6KbYMAo2Vkgegy17UzQpD9ww==","shasum":"dcc2a17b7ed7d4663bcf8f61c18ad6ecc854851f","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.68c7fe5c.0.tgz","fileCount":23,"unpackedSize":107875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvRFCRA9TVsSAnZWagAA2wIP/2cYsQCwLx2VmI1J8GB/\nvk4OMYX29ZEgeb0uGffm2GPsy9BVtd42rf7hou6xpbOQq+GdKjJCtiTC1REr\n4lqMNMIM4hZAFx9Cm4nTa3CBOslU5oHETPnCBKprjxAYtnLlT4shGh8ie2P1\n88WOA2r0zTlmpnK4KubQKKDlJhdEMrKBhvrFb3DztPbRCQ2AsPuFXHIDM2YB\nvc10cmC6H0ML8XBM42K9XHa24uTqqUqForVmmHSkLz3/oqmsZ0sKPmjjuNk3\nOJu0KyiaVqY2K4kUYJy1kL3p9H/QJFmLJ47RxILZMD2iRAkOD/xJepSmhqJE\nNglIojEe2o09ChXa8ySjyNEX8YuC+xGX4KRLdN4YIP2NQz+awOskmgIrLsvI\nXum/S7yjf6wBq6m67n8IUzkuVgD8b0yP2eM7tlb8JDqXrgFUorjOCdYmEMWN\n4cztcmDNjmKL0cRHEYDVbYpuyTwGi+1vETQzVMWTpaRBf7OI/2uy7bN0J4TD\nSXGTLs9Ujp7kczC+3wfk2w1++/Ie/rGkJvmwX0iIkUpW+hNIxclJv6eOpcHi\nKyxpn8Co6+JMcpc/DAWph83PHO8v2ZhdywLVUdlmuGvNd9ZN4L1bFdNMCCZd\n3EPBxdQnuVBNAoS5VKvtFKZQXAA7W9Xj3dBFZ9x1X4qssOLcG/52fDWz2hK2\nxOgD\r\n=nDJN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA15lFBZ7+ejQTxl1my7rFGiCC0nr2t4t0wm1SOWEBTrAiEA7lZvL9S4u3qyLa54DNM6S6AbK7ajSmizzZCvCweTpxk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.68c7fe5c.0_1627583557354_0.5697376143824344"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.aebe39e8.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.aebe39e8.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.ae85f7eba.0","@material/menu-surface":"=13.0.0-canary.ae85f7eba.0","@material/mwc-base":"0.23.0-canary.aebe39e8.0","@material/mwc-list":"0.23.0-canary.aebe39e8.0","@material/shape":"=13.0.0-canary.ae85f7eba.0","@material/theme":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.ae85f7eba.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"d28ef9fbd1251f2664f6385efd6cd33d59bd5a19","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.aebe39e8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-pbiqzC6ua6OYJ+55fE3f596ZlQG5+cpld+wK16H3XldwtUYC9pc5mhR9hHdzgH4lGrCkScaw+kBCZmjEiD22Rw==","shasum":"ceb4feaec68cbb4ea668f152e0ee8f5be9b5ed71","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.aebe39e8.0.tgz","fileCount":23,"unpackedSize":107875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE+WCRA9TVsSAnZWagAAeM8P/3crvZSH2VITmY9G/nvA\nI0KPIBJxy0vaYbxE7Kep1gbUXZn2MHOIdc7qND+zQ+tIZ9SWYMDO/13nvUAu\n5NCsKzp0fKaT/UMbi3qEnVX1rnBLi41poDnPpgqucISneX+oUtY57Wl/IX+Z\nNElT55jueBfJx09nG/s1ldFuKwHrIInVpCuoMEgbdL1RPNtlS6oDhsJMUZI1\nAb6c02zXDv46xYgTSa/SqyrBaRu1mckxphc3SsS6Kn+e5FuXm6dNLs/QoJJz\nIeQou0Fna+75Ku6XI4GBcnex1arXVAoep+Z/wMs0k8OSjLaXRFjbg+0lPntS\nR4jVMp+dUSxPQlreboY8iSTqxNjs9IkZTK2+1UyFtmk0AhLFvIMT2boJKTbe\nzWmZ0y3WLFzvYsLZl1S/+Fs+iST5qbu6zZCDCR9/L0OarU4+UNLIth2Aa0Sl\nNEphf0vOLt8/7wlbL1PtHuSnNh8OMPPyeGerHd8MQDyye06N7hw3x5/PhFg1\n5cfW74ApuLL0EJGC+6Q9BOFTIKOJMfIBcCImJmS26u3YZgce+qMlZ5HRiO9O\nYy6vWD7X1DjqdFwoNRMrJUmzMSAGTsffEoKu5pzjWVFwqcWlarVq9m5b0wRX\nrQ1w7ZRqnS8fjxz7fKc71nmDvd5FISaaFQb9YaVp4W0LIwR+iHQ8l2qnPdvm\nXy72\r\n=Y/5t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIADI6iZKR3DeEGG9edcMhefGbZ0IeYFfbA8BBhgcSiilAiEAv0U+f49+APX/bdZs7Nj0QYCKrs8SUzJpH/AQZtiRkO8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.aebe39e8.0_1627672469941_0.028815739627455317"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ea889c69.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.ea889c69.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.cc5377458.0","@material/menu-surface":"=13.0.0-canary.cc5377458.0","@material/mwc-base":"0.23.0-canary.ea889c69.0","@material/mwc-list":"0.23.0-canary.ea889c69.0","@material/shape":"=13.0.0-canary.cc5377458.0","@material/theme":"=13.0.0-canary.cc5377458.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.cc5377458.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"29d32f8e88155014cd9963c5b4fa346d8e3d28d1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.ea889c69.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NKzpbyqevZPVqwxN/0gP/4XnRRKzyLNME0iXMwTaxkftu4K/dho0mwNTo+GXupPoCga6falj/LAsPLFvnkDXvw==","shasum":"d3c822090fa524037181ee513927c955a8dc6f90","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.ea889c69.0.tgz","fileCount":23,"unpackedSize":107875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCY97CRA9TVsSAnZWagAAyGUP/ipYI1a4pZVL9tTWJ/2J\nKpcRJ1t94/+djHZ8lNfKVcl9tEpcDy7vSGDuiK+hiNCqYZ6fZaQhd4zyjrne\nFt1MvPIFHR7yZfdanYs0suJpngt/9WbF4sBZ/INlGq4dbEbBqXGxbOuQ/7n/\nlKRK+LTs+1EgVVKsoB2g5QRxEgiqj6nxST2a97NDDMrRCmQ8/bytC0Al0nNv\nY7qCWng0QRkzqoYngVyaqT/J0JpSBX01t49UxD6ygW8ha98pMQfUavuyLom4\nD+SixgJKiEWLhZ5Oc/NSiPN3LHXoWxjKcImB1L24fKUHp3icitALnq5HFHdw\nYpye+qfqEbozm6H/4oHRcih+rjNzBTUmtgHiFb+s0VpvlcPxW0L8y8s89LOS\ngERkU3NirUTcuLHu0UM4bBCIXz3EQhN22uy2V5k3NvCVjB03cb7Byox+20cf\nmMrO3338RZ5EeF1izXxmfAZgGYB+WM1qBI4P2IBfj0308ARyHK+vq3caFFBw\nvIxijjQoCtBwm6Df2syObHn2JKrNBfB6EvX9pmqJu4BhGrpOHUZCLAXP5iSt\nQZ9PHbysCuW2dx52OYUwCW3WTvF/FtPxkYrzcJ4bL+ZET0PNXOtCjp0vWftA\nEbmq8pprykjgvyiMq6HWIDucbgLDc9M3L1PY1pQd5S1ecTIzAFxMp+lSjWvN\nP+P9\r\n=MLJW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiQ2Aaixv+AUgutJjyvbU6abCe+2Wtv9kA7QnRcbhPVQIhAMqzFZ63twfFyREUvXR7zOU76uJ92EpQFjCwD8oq0h2+"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.ea889c69.0_1628016506892_0.2609776732693023"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21918905.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.21918905.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.cc5377458.0","@material/menu-surface":"=13.0.0-canary.cc5377458.0","@material/mwc-base":"0.23.0-canary.21918905.0","@material/mwc-list":"0.23.0-canary.21918905.0","@material/shape":"=13.0.0-canary.cc5377458.0","@material/theme":"=13.0.0-canary.cc5377458.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.cc5377458.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"b4df0dc9ece9df56af685bbc48963988f2cb45f8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.21918905.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ym5JVaHhCQNt6QdGJrsxVBIpDb2mHuKW8TzyzV0h6+qTZRAFBubq27Dnhn1b+MfjrKKmhoSelqOrjx5KdgjScQ==","shasum":"e1a3d428fa749e183c4bb3edb97f6d3489c42173","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.21918905.0.tgz","fileCount":23,"unpackedSize":107875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbHfCRA9TVsSAnZWagAAeL0P/R6F7UZM/ryw9Nr2AYxN\nSjI62FBCFPFO7/zBciN6ChBRd8T4DzejkySDBb4oObmT4VuTx6D7XRKgY01a\nbeDuEM+n+fEGdUOfqVfFOqHlpdjc0OkHKv2oKl/ORwa/o7rx/PgIa6ocAtFE\nA7X9MGwwfW6UEkI7aDDI9jlkwzYzL4oQw84UfrvbJPhPfobVIh//DXPFISYh\nDQR1jxJuakCiNTqhBRk2aOZwr3vI9fdFlugqDQnDtFwBet24f8aHDEfZhP5R\n21SHkD4BWnnYgW+Xkj08gASmKVxMTJssdbvzeItiMBIxh4r29zSX/tl9+uvt\n62Cf2WJUy0LaB5GTtiUynMwWT6SjhyINwNmXpRPPv9uJZGlRIEoUcclfxNXf\nqRCf9D0b6vJNFyQzwPFmwxEtEAZjDllv2p7IJpIv0rT/2hRqRhpYfTbu2COa\nUxdQ5SfaErkXa/WvnmfztIOyt0FiUnz/Tr7d95vMSPJ7Nlnd0yS4Nz2EgYTW\n/gKaQFQ7L39Cp2UC6VCRY9EdaEDgIQTwONlhMRXe1Cz1cpkfaSvKQbRkLG2I\nvuwwr/0e9RAXJR5haVYwVdW+DKb+/LOEU82Qxk/n7JqMMqnAclF+9Sx/hdfT\nBZYhY7DR1zNMZGOvnhNYaCZiDMQjJ5hIIFuHVtIIsTydo/Y2DiqPYKfgfjjo\nnxeU\r\n=09of\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNcPjsytumw4NQtnb2sSt/RVdvf+uO0JztkuIb7IK7QgIgZDw8OJcbGIO4Lq94cgNthR3Lc/1lTI86VNwZsmO92lA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.21918905.0_1628025310954_0.21334331623647307"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.193c87be.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.193c87be.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.7c96e6b98.0","@material/menu-surface":"=13.0.0-canary.7c96e6b98.0","@material/mwc-base":"0.23.0-canary.193c87be.0","@material/mwc-list":"0.23.0-canary.193c87be.0","@material/shape":"=13.0.0-canary.7c96e6b98.0","@material/theme":"=13.0.0-canary.7c96e6b98.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.7c96e6b98.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.193c87be.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-cO/ZyXP4Lgj661mCwQy9vClNeYtR7jhk8VnaHBzPKF+mDEMB9/xI9OQ2QyOY7glVfFtf6hBFJ4MpVZIajQi8cA==","shasum":"54b6d8a51a9f85c1f18c3c40c12f5c9e612f8157","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.193c87be.0.tgz","fileCount":23,"unpackedSize":107875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCteZCRA9TVsSAnZWagAA7coP+QGJXUj+g7qxw+AnvMXP\nXJtcO+zYLW0uZ6Kq4VJbbePg57KvAFkEIFYMmp1ufzw32gwdOH446fF7Hfqb\nUGfIAt5/YEpVN9jyqCnwke8/V+8xohsnfJGRQbCUkW+wLAeXnzPRQZUPrvvQ\nQcL1cXofeHXdp2wBmixysOTk9reKuCP3KVL+sQN6LYa2TTniBbtN7t9mTLp3\nXBVREm5FLf2HK62106MDsAjCDrK0w84TpWiB9sT7qJcnyAygn19FHGF2G7dg\nhB5ySi1MaWLdRFqkiWazxFFk6svvrF7MOqzSGWIOZi1iAqwqqdg41KFcFMrR\ncjFumEbGKG74O4tk3GDuSet9k1Lkz4vChWzKLML+7wx8mDS+aXdKpmkORNt7\nAtbUMQXLDVzh4AqQPZN9CJh+Yz1gX+dhURPzREfPgIA5N9K0982IUSkiNLM0\n5RIad+4f41r7tcobCgJ8Fbw/TJZHGCfv8w2Jo49PsPgIcSePZcsqJKbXZdyh\n+H6DWOJvyJcx0ll/WEZo74Z/jWYgXDmsV4YJocuy06/TgmC33VdIOVuk6DcZ\ny3uwwFVmPMS2v7J7e+SHF5o6rc6cDGm4Z5D0IoUZZy9aWCQo3VPRf3dOFq84\nIRx4Dw/NKh5Gm+TQ1maQnUF9fOGVVZT/9AXkKTmFcu8EoNY3cNjjPMvMQlA9\nibnN\r\n=dfLx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDFw36pKrQIt+me+tr2mvvPh/dGLCun0H32qlHUZzp24gIgBsrKWUu2hh2A6bzb1PvkXPq/5ivAO4V5JhiDiC+G8jU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.193c87be.0_1628100505083_0.7618112174663907"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6fc52d8b.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.6fc52d8b.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.3dd611091.0","@material/menu-surface":"=13.0.0-canary.3dd611091.0","@material/mwc-base":"0.23.0-canary.6fc52d8b.0","@material/mwc-list":"0.23.0-canary.6fc52d8b.0","@material/shape":"=13.0.0-canary.3dd611091.0","@material/theme":"=13.0.0-canary.3dd611091.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.3dd611091.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"d70f6897dfb89d87fb73b1e96c8b4164ca76734a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.6fc52d8b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Tl2GtiybR4VTC/jAOULh1cmDkFgv7uEUyqXU//y7Sw3TJa5L3eXkhN2eV5FsjD8QZAYk1oHQm1PSKeSyJQxJWQ==","shasum":"0c5286bf615657362e98d25bf13c158033aba870","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.6fc52d8b.0.tgz","fileCount":23,"unpackedSize":107875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCnXCRA9TVsSAnZWagAANTYP/07R9SaK9+vZ9EWNnxBb\nB36+/9d9xqaVHWaWxTzAVc/cnW9Wh1F3Z0oB7ZN4ApdFN1iRPJc4/trSSEWk\nuDIiHYqAP68vixhAqIFDmZfjSIAx2gzUMyBEit58kK05oQyvkB2ow8Njdaqi\noXHVEIV9L3dIkO8ws+r0pbrAdCqTcwyYm5n9mfAKsThADZ6nH7zgCBrerhqW\nsLAAWTfIffdkcv+iZjYqfMKrXivm437FaBbcmz6yuSBEweAOw14HWtoSLnAU\nfO0/RmrRB0J19B6eXJtho6eTV8S3DRH2aVaty4a59CXEqRGIEGrbDXRYa1L6\n4n5ZIzax02+SmVbcqXWZXmGt/2GJxdSAE0n0/uyCtpss7PyexqCH16uBa6BR\nIH2cjEl2Gx10EbbZT/7SNAhLjBlCI756VSyKmwV7WNqzjaBWzIeB3hGtbLVu\n4EnYnl9TR1eCHfLrZtusF2ULrxoN4Fj/3VWbZSdYaRvFqqa0ra8ODX8FKNll\n4jLVMgrEmDyHK8sIg7H4h64uGsMFWhm1NcadZeC4gd3WMntaaN6jpJzb//VF\n/p8OcN4d9N6uVfcMbyDzLopxMO+8lXaSONmLg8iIHKH1HgZMSrDzr8KO2M2K\nV7fJiEDWV9A4twQka2+G6RVh2KnIB4zrntKzpfx5qvNLSFIveL2t9ZZlW2ih\nokT4\r\n=gnLf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID1CxKXihSHpeon1DuVt0GxoqRwFA5K/iaD3CLRboOWUAiBgp+g+d0XoazanbvEeHuGfFyOUo1LeCamEbct4J0voaA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.6fc52d8b.0_1628187095560_0.10869633955333469"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e2e9777d.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.e2e9777d.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.b47dd37a6.0","@material/menu-surface":"=13.0.0-canary.b47dd37a6.0","@material/mwc-base":"0.23.0-canary.e2e9777d.0","@material/mwc-list":"0.23.0-canary.e2e9777d.0","@material/shape":"=13.0.0-canary.b47dd37a6.0","@material/theme":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.b47dd37a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"cdfa31e7045c5004a0ebd645c1096ddc7724ba28","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.e2e9777d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5NB3fCTt8cqUAQ9cErRu/b5TWAa5swxvCyuO4PIvKOYhiqbsgCwBGeUNHSnAUOyNqn8FTTbzbZpOPVJOXKhxtA==","shasum":"78983c5d027bd11ec4e3d83db78d278c0a707ae4","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.e2e9777d.0.tgz","fileCount":23,"unpackedSize":107875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDGqsCRA9TVsSAnZWagAAoJwQAJs3u+QZyzewti+54QjC\nKLaRRhK2CegO2Z/jx42aS1rfP29OOA/fJQpMVGa9raTZ7eLwfshjx7NmIymD\neSZqtMVYEZXONa3iKefrDShNUgbtBbRK9wGBnQj+BX2IV0RRfmCpCIRl/3UO\nZ83PedfsGibq/YPHVuNPyzXzxnCwt4JobC6ByfQMUqUUL25Xl7EXU6VmVRYM\n7klyujOqz23wldlwFWchYThPagOMaMKYesjleaGaDRM55fXt1tZoNPoW0u7s\nczpDYiEzU3PI7F9vIR65MGqS2DxF9EXKRbF7fL0XkitQ7mFztV4VIELxRCSC\n0rgm35wIl+MiSFmQTv7W+Wf40N4aUUnxu4qQl3PLBj3tVNPmj4sPKzVWwJGk\n4aALbDQ3/oPAf7vKe9sIf3FWoFJxN/SpRhPNLxWPQsMeFE0R6X1JhKaytVmL\n9p7COGsQYsO52+Td3fSc7sYci/fRpWHuzrs5hgV++xhBvCmGQmSjSbdJey5g\nvi96AmATaS+ZEMsmTLFSgxpZjRBSqLz0yggqxZEldKIQsvB2YTe/BGjni+IN\nuvwuGeutQkPcKkZw3jI9jFVFRwjYjcwQCgl3FUiv3PAC45X9TOY+xNbtm26r\n64jpxj4Fc8m+GwWdSDiXXNrpeFEC9V6z/v/A7IMCkoermwNtX5WFc7crvIRb\nypMK\r\n=o7ej\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4VUAoFbFuV70Q6vokSIQE+gzlG5j48+evNFFUMLt3RgIhANDCUJU8lx7hid0AFwpsMbtr9Mf2sYp7S+Nq0AyGPdnV"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.e2e9777d.0_1628203691879_0.22626618460390335"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.72ff1e68.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.72ff1e68.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.b47dd37a6.0","@material/menu-surface":"=13.0.0-canary.b47dd37a6.0","@material/mwc-base":"0.23.0-canary.72ff1e68.0","@material/mwc-list":"0.23.0-canary.72ff1e68.0","@material/shape":"=13.0.0-canary.b47dd37a6.0","@material/theme":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.b47dd37a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"efaa4c0f4dc1cfea004a7f4dca613ec666b1106a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.72ff1e68.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vDxNJhhM1tsNJt7JUde+hQ9SGzR3mbfjtr7Cj3RlDDKV0hKSe4aEFrJsM85kRcn4Zp56kNo7/Z/eeiYt2T/hSQ==","shasum":"42f681383ec168fdd931bb29e0f63cdf73a709a0","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.72ff1e68.0.tgz","fileCount":23,"unpackedSize":107875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaBdCRA9TVsSAnZWagAACsEP/1GbmHAVbQ8n0zEjNltI\nx0/kFLMNpv1ZW8s4l2mG66UvZGfm1SJVJL+2J+6kOYZRtCUs7PCFg1LN0d1P\nlPy3PsonIM5icWbWLXPpn68pKb95InEXj9XaZBDEjAmz6K5dD7+pMMq1oxBV\ngspIhkkBCeMTHJKanFpnAW8iwgIuNh6X5NqQgwgPpxP9Ov8tAvdioj10+la8\nkiunMeOBm1/OsO8BS6+wBF0Wa8R7gb3TBcnD5XyC5iilsMU0YJg7+y2k3KKQ\n1PFPyeitMNdcIDw93BDWZds+6YODoukL7yeM21dvg4fOm+JcPPGxOL7/Bu4N\nkjUo1qa7DPB+XcWPzOjOMJNQAXbZDfT/Kbe+sWCacXE6V7qqs0PQTjiSJ3NG\nVeckiQW666uB4lJo/4PefobdKWZ9o3xnV35m3LLi4oCV2x2b1RapMg3U+HGL\nto5CzsnWpK4uTL4VKhIsMaDvT/ZPJkudLuIProX8H6XadBlvlxJb7Mf89n0o\nYImb5Bo61wlXx47gXhqXrariDiij7eG1s4mz0YTLfZE8/937fHkD+7VZMq5o\nV8m0mrOuOKKanz9L0+Ku5HJ956Syw7kg/eVAyuMbZil+Mt77iWKI83emWW7W\nicfTy8MAcYRxx89+7aVU4vRn7SgfsNnjFqP7VQ6//RGnBbNoJMXle66lDsyt\nbHpQ\r\n=KZ1w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICPjX5lHpRLm/jGjP2ulZrnMufYKeRuPIDwD1syuARIIAiAv3HP223ROPfZUdL2Puk3TbMwTwBlTi9KUHGYGn7vFug=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.72ff1e68.0_1628282972833_0.13935111075639983"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c527e93b.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.c527e93b.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.b47dd37a6.0","@material/menu-surface":"=13.0.0-canary.b47dd37a6.0","@material/mwc-base":"0.23.0-canary.c527e93b.0","@material/mwc-list":"0.23.0-canary.c527e93b.0","@material/shape":"=13.0.0-canary.b47dd37a6.0","@material/theme":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.b47dd37a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"5f7d2f863731a86414f3b6d188833c46053b72c5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.c527e93b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-6CLJ+X9Og95VQ9F1HHLS3zVRN7Tl5l4WfRnPYqitb8Y/pEbLNWn94RZ9TNV69FvFn9qeQYAu1XqLsT6Ft11CPA==","shasum":"911595cad0e732f0281279d4a8da048056b37b7b","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.c527e93b.0.tgz","fileCount":23,"unpackedSize":107875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaVzCRA9TVsSAnZWagAAJhMQAJPI6XeObjfcKRHaRaWQ\n72ZM3UohW/cwzSPpebn6dyHhGRozGiTQbqv797IVE2RPNlPjtnoGbyZUbXNN\n843FunJlmVDV28SvSi+gFeqCK0ugWA8FGm5oIM9HKCegmUji2ytEtSAGudUo\nkzxn2zIGdHL4bVZwwKJBADQArZYS27RoeKx0s8/Zw2LykHHQ2C07zB40q8Vd\nSsqHlDfxGL+xFlX5gY/g2a3kh4iKBC/0PhftXSclOWlqfbSPnEodQR7f1Wwz\nY4hItDSqlvfUq1ZzSnmB71287gppl2/auo+eqnJ/20wwWryf+1lftzHI7kbm\n9df6jy808p1ZaJC+t1e1BTyLnmXwFz4x1CZ4c01hP0EfLewvFfxIYyjS5pz3\nkTZ0zC9dguiqAYPcMSNauj5z0AfaApvJIbiHt9GBLwSh0R9I2zDQB4uOXs90\nVf/KJNY23AAgAlqJXBOwBCxqS/u19iF9M49z9Q8UoGU27lNpM4R4fweOMF52\nG9nrhNINAHdntm9GspHCnss7WUZ2Wa66TGBxYqve+JCtVEaaamXHNavuT3Il\nUc3gS8QswcvOmQSDx0h47XWBkv6WEWo7D1WifJkCwMmPLuvF6jkvwuTib8i7\nPcoxb3fbeeRrW5FzRr/uHjDe7gM8oVpAUxJUZGhC4Y34fv3n9Exnmvm0OYQC\nNMv6\r\n=TCGW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEuumGqOC2g/vZiuAyXk4DUaRL0Z9UD+eas2z6JdcvZCAiEA5RX3NZNF3KM4ze1QmLzUCWWeNfeM1+shDa29D1Bo3P4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.c527e93b.0_1628284275381_0.3179441896433761"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78b1eaac.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.78b1eaac.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.b47dd37a6.0","@material/menu-surface":"=13.0.0-canary.b47dd37a6.0","@material/mwc-base":"0.23.0-canary.78b1eaac.0","@material/mwc-list":"0.23.0-canary.78b1eaac.0","@material/shape":"=13.0.0-canary.b47dd37a6.0","@material/theme":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.b47dd37a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"6052db26d383ccd469e4c4f6cca3c1d2e4533696","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.78b1eaac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7Ixp5pCt2UFgeEXfn49x47tJK+p7SYd4uB6K+bzAemJlJsrF43O8IKqsMLcDPP9FRakwfwxLeo1O1j8BZr07bQ==","shasum":"6a56557c252505da7c0e0749c20b0fb6917ba047","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.78b1eaac.0.tgz","fileCount":23,"unpackedSize":107875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEW4yCRA9TVsSAnZWagAAfwMP/3p2/HFH5CPVSKGtIOWv\ncdGSKr2/z3gThZkARRTD0NiwqJvLOHJpxHQai6L8aJfdF/QrkFdK3SIwbBc2\nLv1dcP1kq/pziUVf1/6YcIi8+SpdMwcfwkiSK9goMZYDisNage3Y5cs4jIN+\nlDh3Zi9DeDsFrIN2h0ytFUHsg9HvaeLm25YlRwDQvsT1SZ2ZhFe/kWSElJls\nCZIdHjVZZiZu7hvNx6F24hxLMaB+oktcqow0c4zlgWmxeyIHpShxWORamj7t\n4jbsk4RzE55RJJZtDhqmj/eKuD6tru9I/tEcv/49XdXv1ScIclB77Ztl4Ytd\nB/sv+M8rl3aafGuZsOEG5JyruFy8wlhK1ahpHzbQdgfUWExYXVcN4JmJJZnk\nY0XZg0eQGiVuRDbWlOK5ymaZ2dAyeDBrOsKJYYW4R5utOXTNDZ/o9jqjx6cF\nPhLsoXvQjTTTFPRIjkLf9z7IyTD+QDAaGJMwgsugwP0qtDg3ZcvQKOwj6KK5\n+R0DJAjBKJMmnNh041YHiqR1I3+oxXK+dnvlW91zrIP4FZGqJy0cBoJlOXRJ\nEf5DrxDB9ncbTDBMg72mtF9ogkjlr0c5lR60iKB5/1F8qJkaxHdmjqn+/VCx\nGnmuqGGFm0P4nVJs1ISKQjohQIt5MDUW+ZtEdcI78ADvcGcZNB5AuIY48z4I\nfMdT\r\n=f05M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICnhdcshurLZjrpGLn7r0BDeF0KCVj16JaWUkcecvfj+AiBG+K0nbKs+6+NHCBFazO+vEMNLNQLF6d+SSLoPSCM6XA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.78b1eaac.0_1628532274698_0.6802010032574348"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8a4ddc9.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.a8a4ddc9.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.7249a3060.0","@material/menu-surface":"=13.0.0-canary.7249a3060.0","@material/mwc-base":"0.23.0-canary.a8a4ddc9.0","@material/mwc-list":"0.23.0-canary.a8a4ddc9.0","@material/shape":"=13.0.0-canary.7249a3060.0","@material/theme":"=13.0.0-canary.7249a3060.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.7249a3060.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"d9658c00d9d10361ed16fd976b03d6652cda9ef6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.a8a4ddc9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-EbYm2824n+qFxxcrAveg4CItJwOgfEGvrfnyLxiJfhftQ8G7yx7AepUPahkzwcK5uZvcIAEtSsohSPOWnpV6jg==","shasum":"81a8b1c623b7e766a8665a825fc566c81dbc1597","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.a8a4ddc9.0.tgz","fileCount":23,"unpackedSize":107875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEsnLCRA9TVsSAnZWagAAz5cP/iGZ6jFFdh0O+iUfr95x\nEgHo623qY7l5W72FgCxnkFH/rTVe0nGnJvtVwhLQ2p8pz/sN8DaEf2U0qj8j\nTvryLmPuKkKBXmt5sBQ6OmdjRRVI6zFnhy7L2JalQ6Og3fBVB8v5sTckzckT\nRmBrSi4NG0uYJlOfIq0ekgVnT82TeCJHMxPI1i4/KAfHNwQUVUPFq5dx6Y24\n5VfxRjPs8naaoCqUmzhEWHePkrQdam3MQut1kL6HGOBuDk/TwUQFPLj889+0\nWoYAqHYk2YypTKUgJpYqgR6HJBb7NHC7k1BLasbdVa54DO8MjCHv37oBIJum\nqQnd83jNU0Nq0j1eoG59sVZOyV+85UH57pJH2ebuhbl0YTFa4Vl6ELGlAaxu\nAFT1qG6R8f6SFjaS4HlZ6DRvNSd/dmw31nfTSMaTuhEjnFGPQl7OXERUcrMK\nhhrrnS+phVNoCmSoKsUQ27pLiFgkSSAYLZ41GvAai9C26GrYvTmTqrPMep2R\nW1NwOlxshOjwd+ZGwDgDlSm3q0+WJUPJ0l4ZxJrvo4l8ZbAIf05b7sho/Egm\nGuzWDwOfNA3AQrr6zGxNMVVoK5YitQHM9xQe5xELfndlKL2E6e9JGGiUgN0V\n5yEnzxYeRJ9ccf8QkLp3dClIN5id52ihqa6Sf26RBNpUdrT+ON7LStsiyTXf\nhuVY\r\n=Otn4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAO0ArDx7OPapQ58tuP4eQOwio+rqWSXeJcZ2M/7KSJ/AiBN42WC5YFfk0Ejxfh/I8FA9YcjH6BQiFYwJXH8fQRqTQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.a8a4ddc9.0_1628621259138_0.0390778087986241"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.99fc0632.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.99fc0632.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.f4241a42a.0","@material/menu-surface":"=13.0.0-canary.f4241a42a.0","@material/mwc-base":"0.23.0-canary.99fc0632.0","@material/mwc-list":"0.23.0-canary.99fc0632.0","@material/shape":"=13.0.0-canary.f4241a42a.0","@material/theme":"=13.0.0-canary.f4241a42a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.f4241a42a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"1182c7b11008cbaa2e6a052092cde8c856306942","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.99fc0632.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-w9duxbAzLckPdMuqLH0Lj9Cnkk8/20ncIls4auQ6GSDvtDU9kcKVzwGClBPajPTRTsddsTF88M1jj0xY0y/m/w==","shasum":"672afc0510d38dc00fc05789e9904c7e26efba63","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.99fc0632.0.tgz","fileCount":23,"unpackedSize":107875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFE2cCRA9TVsSAnZWagAAfM0P/1AvmHTiFnyG8RzZfwXx\n3LUKGpIAhM8lhIo/W0BXOOfwj5ptpDcLbMW3UuKrznMeZ0JSC5jlUVJyjs4G\nUZ+r6Z2E1Nr8NQ7xvB81Ll46ck1BmZssPv3gdBPXi6R76HdsPbzsJSAVBgi0\nIklQQv1g658z5bXf1aUkLRZUUiNaGof7pQB/OBivUkwW7FlWL82W9ivWZEQp\nWhyWkCiTBXIkbQP/7ll7BE9dQL3D9yp2iNHpq8xKSSJVGXjCF32DfCbaF38W\nITsy8lcRworzG5d1WaG9aOGDQoaNfaxPQc9J+AcjSv2dQQy7UkOx43nW31pY\nyO5l+s6mXU9GOUwDjpo8e0k70t50MS2heES15gcZsYxsb9ZNUvSwhI4Wnw9K\ngY+o/Nk2TldM8UYF9i/6leDqz3JFKatCNTwll9PuQhamL0jqy65TRQOADQhu\nw+cNUVv9g35sSxQLDIPI3gCMaE/9Ukvk2J1QFF+R44ntB2vty9LLUipLvqLF\nVmBsPsHcz7J7LrOARxIyPH7wyazHLnk0RxTSUbIIXNfF2RYP435IiYOdcTuM\nzZoVYIMv98BIYCoUI3An4l5cwtoIC0IGRVnNU3tPXGNkG+NM7jInWet+OTFT\n99g3t3NzuWBWPDma9U4Nyi2xX98ggTGREdoJKa8R+k5KCfrh+95Z0wb9v2n4\nxG1c\r\n=cTWX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICCcuAitPxk97OCfI6iv/8TgZwCZI14segZX8dBQw301AiB+poAyaBE5hNRo2Gp1he7EFocDjW7FX7DcEuses5VhyA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.99fc0632.0_1628720540412_0.2264762208497828"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3f47ae57.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.3f47ae57.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.0ad12ed3c.0","@material/menu-surface":"=13.0.0-canary.0ad12ed3c.0","@material/mwc-base":"0.23.0-canary.3f47ae57.0","@material/mwc-list":"0.23.0-canary.3f47ae57.0","@material/shape":"=13.0.0-canary.0ad12ed3c.0","@material/theme":"=13.0.0-canary.0ad12ed3c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.0ad12ed3c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"edf4f3bc9066a2b36444c8a434994a5482e8b500","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.3f47ae57.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-RDi+Qi/Bn70mYeXe6VO5/g4IMObPBPkzfE0TiwIJ0ht6xg4vdzf4Eq0PdK2mIyjeZ3i3Duryk6A5UcGNpMFUGg==","shasum":"aa460dd5592649163afd0201f668e87f30178a50","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.3f47ae57.0.tgz","fileCount":23,"unpackedSize":107875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWHNCRA9TVsSAnZWagAA7FwP/3KYyeTnhtygKjhMyYjT\nVrmQ7RpKxR+cdNMjzcJ7kc2VfE+Q28YuTvwweCb5Fnwr2xt7PkiKTyAdsbd8\nv/caytkeGVQAK1YrY27gDwB7wRjKJf6fpG37vLoN0gVPg6GOIAEPYcRSO0uX\nTLaukDoIfvSsVibQ4POQVwC2lP3awl5dAEj1GYiDY/SCtwFTJm1kXYW2VXP2\n2ozaFRDFvgxXwiTISB9WinAkA/j6ycI5xzQIxR8W2hcXvMJA4P9PGnE29AVD\npbIk8hycuBionvuhIevQzpM9Dp6f6ACbX9uW3QpyOCfpqIlFORrsq99mXKoA\nvuVc7ADZXjaW/ugdloTAnqfjwH71fvmxaRQfFFtxVM/UwyDLjt2wv/L9wM9h\nDcjvsU/oLG91KloyBqPJcenB3hOsHWSo7IjJYrB3Bi+JfUEh2OvheGSm2HX9\nS0G+gOS7+RQMIlBnrKfswfpKlXwBhMStKKfukI2hvXbr6divcH/MBGbDoV9W\nPAIxR2sMWZoUIlrRibdsMe2lCA5cmNIdmMH5bjX9tdhYUJabcxkj5YAsvx1g\ndy7Qjxp6mzMktR3dDnrW2wubaWSksh+x/ljUtbx5x0UBVqQzpwpdbMN35/Oe\nFT6lDBSSI7HGtad7VDdxvdukOv7Ke1yWAQyW60Gf4M0XtKrdTfvtft6I28CK\nylxa\r\n=aVtO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxIz8gH7X6lPUGo+t3UMNrr5cY+I2JhMSIKRe2HzykjAIhAOf2Tigl5aP2fdIYK3fzcI01Y6QOJnaXlMaa5Tdjhftk"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.3f47ae57.0_1628791244998_0.8115147438753278"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6b9bfc32.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.6b9bfc32.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.077dcfcfe.0","@material/menu-surface":"=13.0.0-canary.077dcfcfe.0","@material/mwc-base":"0.23.0-canary.6b9bfc32.0","@material/mwc-list":"0.23.0-canary.6b9bfc32.0","@material/shape":"=13.0.0-canary.077dcfcfe.0","@material/theme":"=13.0.0-canary.077dcfcfe.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.077dcfcfe.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"2479bbd88c9e53b974ec7671345a52cd8ac0e907","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.6b9bfc32.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-u8UUmfJzOpmEOFXjQkNrgPs2P8WPRTk8DYXHg1g5gR1VTvGGnnB5Fb7aZjmkemsanie46eLr2wVQ8kn21gm57w==","shasum":"12a21ece7c9cccfd883bb885c0948794e266b8a8","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.6b9bfc32.0.tgz","fileCount":23,"unpackedSize":107875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWd4CRA9TVsSAnZWagAADfUQAJY5r04Qo8vhTzFk6HdH\na5NwnjhYKHR2hoOWYL8zasu3rYrWoLnU0CNXSNqjTWByGx4WDxrCmcUaNPrF\nGpf3sHeij93GnCkB3lUdllvpAgVRrxlmzVsut8CHnTl5pHjVK9ZiHZV84P08\nLsixRAIEWhWl6CkOfeGA0I5VJufHLqWD9VWEEJHg0fGi/PCbEc/NyvNKI6QT\nwsN8odjVpF6A2CNN/S9tGP3cwsu4NB8L504XINknyKRTQNbdG/RhG5+bZiwa\nxiPW8I6CpKH47QIw2MELMvDVZjBADqyqT5gBpCueVkEsZTMusE0oBG9xiokb\n/GiqNADSgHygJDbkB9b811JZbyxt6VKT+8IV3JGJGtzXPkxc48J7sqrOgQo7\nFW0/ra7BS6Um7xui9OWn2tEXA17lEGUq9B7i/1zmqLBppdLb7Q1c0LOZAVJx\nRKPajr2cWTFbDyIdKiRxEvoNf5aS8f/fw+HUwk5SYe7oszENQXOVNfFOxiiA\npftoS0gwD/2GXSv7NTIo5coiLILHjH8vvNHohb74V4SrSsEbLvVcGbSo+/zf\nvYAYknWk0t2Fk+psZlkV8Fcpska3qib8Cy+M/3NhGnGRKap4jKvTXy8vuS4/\nOWgwABFXJR03zi5wzGpMdTjhuHosn6mb+0sHZMaXUX30OlDMpbrN98GGklvV\navvz\r\n=FEAJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBqR3mnQMyWkhtR6Q2mgOlkQQEPkf3MuyI6oHJoYhfX3AiBaQsU3TBT4Nt0yKRdv88+g8A5sLLBnRnOzKBpMOQpHPg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.6b9bfc32.0_1628792696505_0.2511399483979717"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c89ecc63.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.c89ecc63.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.2fb068fb0.0","@material/menu-surface":"=13.0.0-canary.2fb068fb0.0","@material/mwc-base":"0.23.0-canary.c89ecc63.0","@material/mwc-list":"0.23.0-canary.c89ecc63.0","@material/shape":"=13.0.0-canary.2fb068fb0.0","@material/theme":"=13.0.0-canary.2fb068fb0.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.2fb068fb0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"aaa5bd89f698007e7af19bbeeea7c1212b851c35","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.c89ecc63.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FnKTVHax+3569B/Br/phJohWNQVXVtJvkftTmWPvMluy48STOtp5Ak5hfIR2Vm7VqpIs7nfnaGUStChm4ZM+4A==","shasum":"3f67d3cdfa6241ed21622025f59c17bf6265a6ff","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.c89ecc63.0.tgz","fileCount":23,"unpackedSize":107853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGp22CRA9TVsSAnZWagAAbssP/0B0o0VK+l3x6ZBXbcSa\n0+LzNpxw6tw68vfEza1ACrUCqPsxjlbzpMH1hSFAk9u3J5aw850s9803SZnB\nmJZg5k8gyOKj19oW8p8cs160Tfjb8e9elkI8XdnRZKgyTISuMV9S8FtCuwKN\nhV1PViIWjMxqHTGqDKLbvfrvQ9ice7niwCWqlovJEHhRGRT3bdBw7SziLIsz\nAdL/MF6uekfxZCd5G8w5UJw2d/1JU2x+nv24Z+eatCKPH4uypdK8fDKIoMf0\nUGW+97O0RyTfPTvO4S87/YJZCizxA5zmlrrvAdq8djDvsFh6c8zplTqHUxnZ\nKU+6fa/d7Wn1Uh4n5YL0kldRpPG8ZMm56Xbr3k6kJRVOTpyTQQWhTIkIhZ8e\ngJ5V9+ynLBYMu4WTXiOs88tHCLr2ZTZAlJvHsqAw4axJBnveLEE0RzxG0Vls\nodtnXqwaC4EwFLTj6ZtwPpACLRw6m9JIEyREI6HORBwiYlH+j0wJHeUp9rzA\n7APUzf+XabycB3eB1jag13rN3eYnp/EMDZ1ZcwZD7u8Jx7X66e6cJFJ+4dhd\nshicZgkscdOugY89i7gYzj9DieB2EwR3jM9UqhWKyyuVFw5x/pYX9wh/Bbrn\nQ3vwG5oF/3KnW7Rp5DXvqGG/2Rj9tSgqVEXUJHg1rSV7eq6hhHgi4G37PyBT\nH/1Q\r\n=d9vN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+h+4pM5kk2drsu7ZYL6K3YMpIbv3sB3J6uGDc1AGaGAIhAJ9rdetR6ikqQmoA+TXsSmtRoZ+5+DnqqzcR/fi5YeHy"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.c89ecc63.0_1629134262318_0.06968704084277677"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.59de86bd.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.59de86bd.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.457d89aad.0","@material/menu-surface":"=13.0.0-canary.457d89aad.0","@material/mwc-base":"0.23.0-canary.59de86bd.0","@material/mwc-list":"0.23.0-canary.59de86bd.0","@material/shape":"=13.0.0-canary.457d89aad.0","@material/theme":"=13.0.0-canary.457d89aad.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.457d89aad.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"ac639cd83d2e2bff117ac2f85b2cd2641560a85a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.59de86bd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Hyw1CYemV44A0ksiABZapF79BgD1wJn/1M6rl5JVJDg02DQkONqpbf0mPhnxHOg7OoRHkAv/Gmiu/e+KStqoUQ==","shasum":"363033b966ea5c71ede49fae63006896f0b43392","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.59de86bd.0.tgz","fileCount":23,"unpackedSize":107853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHGS9CRA9TVsSAnZWagAAtgoQAI+hj8oXNEURP/tddB+5\ndTHMQh5pHnaCbyNn4S/l0nJyQcJEqor3HCmXpsxrCl1jWthmwp6A/QEV73Aa\nhVML4XZw3pCoY7gy/fTxv7I+DVb0uRosSvWubtyS9KEThEJun9tfcihcO9Y/\nbRPzx6Nu+V25ORIusjLM8RpW2L1IEhCC00DBSBo7NyRAoSC8yh0r+DHVd8AN\nljDUrIcmTJN4X8xJBvakO61xDz1zidfKDJekt8+avFGqkUs7hZdB9vNyLjxB\nMfVxTfne9LMpdYinlRx63GFfLki02YGOjliM8KZTlWXBrrE3yhp9jAZP+cZ2\nzehs5HEtMzdcNXdkdXgZ3oezQPQaSe3dgEILTjOE3r4+kecYSSQNiqtdfz+E\nX4FkN4ZwwX045sGZmzeWt+VIGrEwbwwVD0N17QEieLHO/hCMpjU2xIR/gz+q\naPG5hOqszrxLFPFNstW6brFYmxCTTeHpwm11J8Py/xsJ8roUrPziBEI2obAg\n+TXS/uZXRMYKmaEj25d4uqmNGdvmswByaYM/9s4sy9ploK/efhC0DHYvESBQ\nDqWb2OsldgY0yA4uYy/Ic0TLk2fz+xv3vXDdwQd7gi61Y+91oiV2AvTz3CeX\nzzRDFYmn3057hg6BnipRpjDzhQTjBqYfuxT7U6gRLoKuZ2+a/Oo7zPzZEaXz\ncp+n\r\n=6+Vf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGtXpamDsSkokt0gw5Vexw5JWBNLVqNUxaAjCJdRWJpeAiADlNHXMD/m3qJTn6eKfGOKQ2LkfM5sQjjUiJy4GXG3fA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.59de86bd.0_1629250749118_0.4472964495281111"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dcda879b.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.dcda879b.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.43d2eed2a.0","@material/menu-surface":"=13.0.0-canary.43d2eed2a.0","@material/mwc-base":"0.23.0-canary.dcda879b.0","@material/mwc-list":"0.23.0-canary.dcda879b.0","@material/shape":"=13.0.0-canary.43d2eed2a.0","@material/theme":"=13.0.0-canary.43d2eed2a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.43d2eed2a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"ab309abf464fd85bb1f234aaf8a2ccd35b8e7635","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.dcda879b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-62zN7da50nIyUMudIV0Z0fcAYTKZYzkZ9wk90gov6m3TKkJAE/asbWDdY86ogpSkiqIunPmGnl1h+w0CPQMhKA==","shasum":"054ebf9651589bc0f7317f1e2ed90e3de4679487","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.dcda879b.0.tgz","fileCount":23,"unpackedSize":107853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHYiBCRA9TVsSAnZWagAA80sP/jWyMT3hi9lt4MXXHtDE\nh3tfErwSPp1iG7uGT0jXc+sXULnBMXkHwIiJ3LcTrwkmpMiNrWzz5fZGG2/9\nXwGOh3UFOHy8ilyFXRyXfB+ss4+V3I+io8gVbDkO9y36SZkeLnHiCICYOhbm\nuqsd15JGoAW98AyZB/bIDLUVqedgLSIMpMBYGisUpAcYzG8DflN8WPQOwYrY\nFC1kXYm+ofxfHpctSCRJGl4cffOJ/aHrRd62JPQjoxyqmaYjfv72MKibsCEk\nPZ05yh8q8gijv4+FUZlYmiS8Na8N4IwNXmT/eZQ1++1XqUKI/J7Vpd9Z6kke\nGMVNxzuRQERyVIAKa+KJ3B0HEqWv3f0pjd/F6/fAHM40JWJAcMAApO+fV/jl\nfe899DJAyKcIodHe3k/ZYmrwBYia7pKIpYbRnpxwNzYiYrW0fUrA5zfuNPn3\ncXuYo5LYr7H/3HY/mOjbrb0kvL+BE0oO4RBtkMj8lrSGXHhDkq3qzA03wQtl\nlIOvnCXAvkw//KWNcuIeJLyp+DxUG8Ock3YMhnq7vQUEprX/DvisRNegidHW\nQTRkFlRTYBAHsxTCOuLEGAnYTO1/KkTnRY/InpPRaNx1e2v8js2zwELVkv6T\nrRjnLCFg/uA7OWG1kruADHPeAh3+MnfqeFce+1b1JjvcgO6TUQYHFt/sok5A\n+f+X\r\n=euX8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0rMjp4v/A6nDuyfDgwHOhb9Xk0zVAaBsU7N6oWjBAiwIhAPmbFFnGTRSU6qtJPFMGMGGRTYxwBZJbhF3upbxZVe01"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.dcda879b.0_1629325441721_0.7706911311947218"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dbb8b366.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.dbb8b366.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.43d2eed2a.0","@material/menu-surface":"=13.0.0-canary.43d2eed2a.0","@material/mwc-base":"0.23.0-canary.dbb8b366.0","@material/mwc-list":"0.23.0-canary.dbb8b366.0","@material/shape":"=13.0.0-canary.43d2eed2a.0","@material/theme":"=13.0.0-canary.43d2eed2a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.43d2eed2a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"9def9b810923fb3cf5946b62d7be5df5ae926fe6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.dbb8b366.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mGi3lXC3iMWk7kCPo8274V+rtAzTUQG5evL/g8jiH5X5gdXLcLvK1u7w2NM3E9pCzqojwfd554HWbkcI6HgYfw==","shasum":"a668491fb29e5cd11eefc54229a76a4469d03a3a","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.dbb8b366.0.tgz","fileCount":23,"unpackedSize":107545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuKwCRA9TVsSAnZWagAAoZEP/0vyEQV5t6iSozN7w1EC\nwX48AMdYN8ujPojZyxPlBInVYGJnK53d4/VLoCoRFby3eoFMq3M+EYRT4GP2\nZsLkKzrkMJzmFymgvKe1UvU+NzH46647cgVn0/N4TjmG46OPeXsOZnq11/gL\nxMbr7XAQodCLfivvBxb7hr/9FuSr2chmWpsT8yNixSmOGzkLTRBVrRtQXKyG\nOrzQFcMt3Ik1CsS1NDB7jenE2nnSEi9wi7CoXshQwk44oBgE0UiccxmnRCG6\nCSO8DPPnbhaFvzEin2KK6ZSsHitNHY6U2fXCMxqab7wF9ulBQ72ShOg24h6y\nZpOrUfJbfHlo+lIJPjOfa9mV0sEHwc+gYHskENOMbOkhLTfEMAskf/TYCKqf\nBTfVqO7yH1s/NtipCdtc+Q139trLI+70CgKvOl0zCqWalcyr+PMCJceRRZrb\nXy6LdGs372FBcPbz7OcG0i/ENqo80KtJt2oNeQTsv0x5NchptRwUkBaOnN4Z\nyPmy1miW/wHpTIFE70QYqs6XWGjzZzr0T5zTRynYwv+MiOOsB+FNjAzEKtyn\nEWC8LlTydE2aFV8s/NPIZbugzY4roteiX+N/dGNU2rLsIkLkM78sDb8x64VL\nbGzdFdESIzjhEjtAL5vfZt/HIivzRUxHOFObCy7i0HwIvTRkiYp6DSpyBf2H\ntvuk\r\n=6ux4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFwW0SdpuMYSxPfz98+GJnDjxvd4v0BAGStgA4iA/NdgAiEA3m3N9kv2vOWNEMJxz7iPbvdBSEzrny8tQS/I9lLUY/8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.dbb8b366.0_1629414064284_0.40475000149123286"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c6e3060c.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.c6e3060c.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.43d2eed2a.0","@material/menu-surface":"=13.0.0-canary.43d2eed2a.0","@material/mwc-base":"0.23.0-canary.c6e3060c.0","@material/mwc-list":"0.23.0-canary.c6e3060c.0","@material/shape":"=13.0.0-canary.43d2eed2a.0","@material/theme":"=13.0.0-canary.43d2eed2a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.43d2eed2a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"2c417f32674c7318ccfdfa842a3a2cb3d57853b5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.c6e3060c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Ib+1FuetTggcqyboNOLyvJKBrrKPElvCXu/7RyvtrBI3J6w84ig1rQhlhLR/5NVa3ERT8BmriGP3BgGRSMMtRA==","shasum":"3d49ce85a5a301a680334c484c521402d888e262","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.c6e3060c.0.tgz","fileCount":23,"unpackedSize":107545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuMdCRA9TVsSAnZWagAApaIP/0LiQlhGUcuVuWqJ8UiL\nDZtIz8OG6G26Lm8WvVAVDsdY2BkzXzXXZLsxB7IvncHv2I2E0BI1+qLGrIAW\nn5dsQKMunoq2xDcKDnCJ2hXgK+ulNgOxv+BxbmAlsdCiZNVpHU19R7lNOsmK\nBVjKxMaYIyTCxgZ+hhiU385x7ixRtEbUN7qR1/cd+Wvw94fSHlcLfnTB7FQW\nL5a/8SBCKARp5CU+Bdxv+CiRs1illMY5N3xTgrgpf/IXJyEYIEYvZeAn9SKR\n/A0tqy/4VFCbWmBmCk8/fRCeFTe5c/5ukcJ3fq9om/YGx06zBMgFzXyK+7ww\noHe1rCJobuzC6N86YVa6Khj9p5KAdao+q7hskXpdLAgQdEkxUniZQBCooQRM\n28jcoOlBtkuZHk0JuQfug2xXKlp0Pr8nZTG09/XlTpWhLpJLhsuuRIdw9JHJ\noMgls6lfWjXuslxrw8YoAiL+c45KRzBgTUZTS2LuEa0GqFolu5O/QScsNESy\nP5/i316wil2gtC+Vilol5gYXGer3XlANjGc/KeWVQENPHXRNHi9oGaDBZZ91\nl9WMJyNsFyIy3fcw5FxH9BcnlpQsuesZZUU+k655f9TDma/kIOD2G0OocquF\nmAFvadhK+rZAuJfxC7lW7S9MZfrT819EPxZxkRd4NAaSnLUiEgT1rc4ec0pv\ne87f\r\n=oSnG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA82LMxplJk2BMRyotpIdJapvGYwxP5zFJdpPKhJ3bCaAiAj9+HyC3ItIffqjJ3/KJAwHJ7rbYIQ3ec4cmXxw+WcPg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.c6e3060c.0_1629414173787_0.7464012482469455"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.03120b7d.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.03120b7d.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.0a9069300.0","@material/menu-surface":"=13.0.0-canary.0a9069300.0","@material/mwc-base":"0.23.0-canary.03120b7d.0","@material/mwc-list":"0.23.0-canary.03120b7d.0","@material/shape":"=13.0.0-canary.0a9069300.0","@material/theme":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.0a9069300.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.03120b7d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Nu/ha8NKJBur9QDPOlI3T8VyX3Its/Dq6eCE85P53pWgtObLh1j2AmDGF8vm3hXW0PRq6FDzx/QOQKEXwyDnOA==","shasum":"953a5277518e65f31aca4e3a2a924a940f74a5d6","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.03120b7d.0.tgz","fileCount":23,"unpackedSize":107545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHvcVCRA9TVsSAnZWagAAecUQAIpxLF6Sx9ptq7AH5tJR\nExcmxTkaTmJZ6bB0TqaxRsUv22cXYodaMv+Qq+T347Z5W1Tqp05dhipWFPmi\nQWXPU+At5RXTZ8G0HLBz/pedeNH1FEvSA16XoWNkS/wVocSD8a0j/cWln+Ie\nM8RRfDo+x7FONpRB4XrkNtHorUwVF2KjQxL9Ug+ek6TFDEoew32XLjNMJORl\nyuHstV/to2OYZDW+a6dwtoUd1kK1xMnYpQQRrctrNWerElOE4mRy9rE+7MXS\nGH67gqVZFOLs+4kWw9UVMJIK6BbeYuOGGe5YBsV+nXi2OpN+610rnOHS18um\neyS6m5f++PhdRfDUGaurdgS0liugPUrNednWvnR59pFbmQiOQ3SPbx+TvD0D\nOChAqMBAjv97uhGo99IP1IXuFUdgesxuYsOfXOt6T7p2Ir6k8M+6IOvaSkQ/\nAswrJ+KJ8gMW+PAWL1fvGrpBGiZffC5UVaB9T+LpvLx8H08yh8YEkiFKZO70\nJ+FQaKshr2lVfpgcz5g4CmmtS+UFZEYe3CrW5DRMe/7GbwMmXqmfbNoZ8rkA\nBQjbn2QGtEtIFmRTbLP9C1Ek3RUVKsoGiogP6ldwBxd3i75L/bHu6RzCIhPt\nBiICfhBIhTCcjk1k3uZPxrNaC6ckXHVHXJv8GMyW/Rd7BYjjD5KYXXGOXvcZ\nGc2Q\r\n=FAKh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAtjDsf7fLQUhwV3dk384d8MI4cq4Y5+TEGT6SPjBCeVAiEA0AZFBimK2liWLQNYV7IFHpExoLcwJskxlzRKzYgjYug="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.03120b7d.0_1629419284845_0.8592164152074502"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d75a5f74.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.d75a5f74.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.0a9069300.0","@material/menu-surface":"=13.0.0-canary.0a9069300.0","@material/mwc-base":"0.23.0-canary.d75a5f74.0","@material/mwc-list":"0.23.0-canary.d75a5f74.0","@material/shape":"=13.0.0-canary.0a9069300.0","@material/theme":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.0a9069300.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"ffbe861a3137fecad60074a6f36ca1061f940cf2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.d75a5f74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3U0+rWxwu8g8aM9dAhHjiFL7YkaDKh8caozcEaORpMytBYMyCNI1hPY9WWMoa6CJ5kzBMvZTrENLqcVXPAq3TA==","shasum":"acce3bed8f4a8e9e0271fb9a2e9fd934af32c974","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.d75a5f74.0.tgz","fileCount":23,"unpackedSize":107601,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH2BjCRA9TVsSAnZWagAAQWcP/jrScsUzMt1EsCZLSajx\nOqI3+MFzBd6uS68ur0qqk08CG8fj+FtRxXtDsiUfOUkiX68mS5f7f+WYZrOj\nLXmqcPbPihV5KAhsVF5hbga0foRCNHCZVUWp1zPNNN3P3bgl9X6rmeg1uEZq\nhAgjdlUVwOPBqV2T0JoTP6a6/oeui9K1VqgpKDiyNrz0yg7dsP49YzBNrWKR\nMlvtq31XdFppY0C6LghugYNXqdglipWpbEDszU06kUESZXaOlQPRkEYBwUby\nzPZ41hROr9EbqDNswRLbg7HnxM+V5YAgdYM57puX0wiRpjUQ5XugE3tm7j4R\n4ZmtHjq0AYCkt60EgDRWyughXC7cu2AVUY2lBC4d2IS0DlmPtdffZHcZRJkT\n6zoCg5ef1GmVE8Gr47pmSMS1BstdXjOLXdqts/lLmQuqZ3G1F8XYnDRtuQOJ\nQC5Q6DCVgx/GR1+/XjlawK223/GLsCUYzmq781ViGpP6F4EeH/Zcw1ZbEs5/\nOD8jWFgbvp/mx9SxQfhX8CT2yejpwWQZWs2nzYPcSOnkHbBgFxV+ru0KWTau\nC7HnYvwBv0v2eU8W1j9CAFjIlBkHOVWJp/18mDjduYy3IynpATbCyp4CH05C\n4rGRAINpqhA3QXKLlik0ek/6sHU5g2mVgrNFIa4pfBM07pGaTdyfn+euBRuH\n1lj+\r\n=0k3w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEOrNN2+c/Gt0bHUfjxqluQIHxbMeHTTvhpTIpRcnM4JAiALZR8qx4TVZxkFjD7ezlpQwkjhvp5YiU8f/yne7xXimA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.d75a5f74.0_1629446243498_0.7819142345091425"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3d79ffe7.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.3d79ffe7.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.0a9069300.0","@material/menu-surface":"=13.0.0-canary.0a9069300.0","@material/mwc-base":"0.23.0-canary.3d79ffe7.0","@material/mwc-list":"0.23.0-canary.3d79ffe7.0","@material/shape":"=13.0.0-canary.0a9069300.0","@material/theme":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.0a9069300.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"4d51b5574d0d1d8166f9358a39a5d3f2b4c728db","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.3d79ffe7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-gmIYQLi4hYyo3uvQJlQNaVQsi5cUak/tf2aYgMr1jLa46vB8LDrityr4MqsiRzG5xnvlZLNhb8YPeWVerY+kGg==","shasum":"cae46da8e165f2e8248104684794f5718bd1603d","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.3d79ffe7.0.tgz","fileCount":23,"unpackedSize":107601,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+TFCRA9TVsSAnZWagAARbwP/RMTUjh/rSvwMu3gPBP1\n0MHNPGTINVrM/1XQKBAolNiffImIrutpbV5D8pFdur//da3s622vtwjJDN3g\nK6VTW19sq4DC/6fza5IHa2pYDBGTxTkFR4c3gyXl7bD2f5nm/bTJm+FFJmHX\nEHd30g/ow6+GmoSNbqJbVGIW4kSRUKAhxtXi9jqeEL1nUy5xWo5NhPTGJvhI\n81lzZQF2Z3H7WIgpE/4jvTyT+GP3qEUrw7CDeuARoTtf/RLUVOkwTj1CSre0\nSMvDOagql4u5NsBaINZDbrEb6BdffSUljNJYtlHGrk839yek5Qs3MNWrAg6b\n8wZ1K3EvCWvMwjqWO4JZcqq306bwDnbZ9c3V5hCDFqF2hWTKTBuzbQHN/q+O\nEmeAetSIuAMcR58SOAoUSTdC9MGep6bsLS1rawPyh1CUBwUKAfKOoCfrtT5C\nrFTB+/S8fv1B0eIow+SLtkRGSfATFexU4H+KPILtDupLOX25CxUYlnUl3iAn\nL/97sDopDYwq7c6mdYPcD9Y8QKT7XlwQQXhi5qjxDtpcgsaday9tsoSFJtR4\nxn1vjy5KQtNn0brzlUR9NiwjV08NrmRSvIzXIZCKNSbSf+E9QsZ7bJY3fzex\n3jAEwLD0BHAl198pen36JH5OeIgQxoPRzo2wcW4c+mmmxj+IYuyqGI1SdLcU\npxKb\r\n=hmZg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIELT/lwrtiyzaGGslGi3h+lshBeya3ECsjoS8PDXTRFwAiBdg/LkfvYdpeey29p+zQAIDjZ19nVvoghut2NDhpb51Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.3d79ffe7.0_1629480132922_0.2123300684103513"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.02213ebe.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.02213ebe.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.0a9069300.0","@material/menu-surface":"=13.0.0-canary.0a9069300.0","@material/mwc-base":"0.23.0-canary.02213ebe.0","@material/mwc-list":"0.23.0-canary.02213ebe.0","@material/shape":"=13.0.0-canary.0a9069300.0","@material/theme":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.0a9069300.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"fb5a30909287b897d793fe4c7cfca2cc93cae697","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.02213ebe.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8qkWS29D4LEffRswHBORqVyDC+KI/jVoETHq87/2a48/pWOurzChoLakphXDQXoB7V//ks7pl7UX4BY7C1zTHQ==","shasum":"9331bf97d195ea104da666ee9199b644084da924","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.02213ebe.0.tgz","fileCount":23,"unpackedSize":107601,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+XkCRA9TVsSAnZWagAAy2MP/iPkohQL7uX5Maq5OsJd\nyx5HBulYUzu1pE16q6JmeIwnNDqHw4x/deu2PMCJwPXC67+LlGR5nWsJVIre\ndQv/zyNJZc1SKnTMQzS0odQ3O5sdBiTGhISjcbJds0yHCqa6zZdsrI3KnRwT\nSDiu3kPtQHcQfxxZNQCapuouFabrx0EkCrHyPIbLiqwfkhteV8wtP5mz2GS1\nOp0WsdmVbgsEC9qJFLXCEZANAQhQmdeSZRNp/cEbAQE/te3yhE7r3PvK+ikx\npcHM7fDeCG5kPzFLqqW1+h3UJzXT4UqjvKOatZ3RtVzmr8B8ZnmoV4mJSLZ+\nJRPp+kPJ0qSKd2sVqT9u9Pm21SQD44BhZoSecV58gTvIP6QqA3vRmL+/86PU\nUHrK5GbH7MN1STCqcZBKS5hYoBcJnGQiK7gLqy3kPZEOSNUn537BmmP3engC\nzwNTD6kMTjQpOMn+c8W4UMdT+8Ervc5tyhuMltTJMQxhENmoOk7QqDUIVPTO\noEe3M8CGR986yXxkoUWFLwIzKdxi+YqjNW0T4wthVatoU0blXQQNR3TaZS8c\nnf9U8LbEM1unHkDh/slvri2Zv8QAq6KOj8FXW+bW5EJpythdYYbg0CtMTPu5\n8WJ6Ihe65iFFWkUN2Js7VSfX9D6i5F/K3yDooLNsna1kNZQ4by5dyw5x++Qy\noepu\r\n=QkVl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSTQLKXurHGuQYCmFkz9PHpOJrKQE9KQ0HEYl+iCA66QIhAJssX5V5K27NRC5kUnkLPy5DBwcYW7UIj/4rbQyw7n9z"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.02213ebe.0_1629480419928_0.05098606051193011"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90a999b9.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.90a999b9.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.7da413ed8.0","@material/menu-surface":"=13.0.0-canary.7da413ed8.0","@material/mwc-base":"0.23.0-canary.90a999b9.0","@material/mwc-list":"0.23.0-canary.90a999b9.0","@material/shape":"=13.0.0-canary.7da413ed8.0","@material/theme":"=13.0.0-canary.7da413ed8.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.7da413ed8.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.90a999b9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mznXJCr9Km0RQRi4E1EZnMta8sNiSFDi2ArZAuG3QaFg89dfClQDkPt1DDQDqLhmSfCqdoDJ+8WB+3QeqH3h2Q==","shasum":"fd72b2052a98622673ceebc40b38cc716d541dc3","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.90a999b9.0.tgz","fileCount":23,"unpackedSize":107601,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH/fKCRA9TVsSAnZWagAAZz0P/2VXTB6EP1SXSCy8y7X3\nGkci7qAbUq/zoQMWYM17H8v3NV6+MRKfRLJPEtpvwTopgjCAfa9Oc8f0sDEs\nIPmwkAax5UK95jQ+TP5CHgeRUGRvLH4Pz6zSKjVKywjB3BcxENj2D7Hcis0Z\nD1fSd+hIIT/pWCub46O+BdXAbJrEUmZQopo6QbEJ/JVW60ENEufL0KAYr3bA\nhX2R+ZyGEdhFeP10DGg4/2pNo67vRRz1RMMvcktlRM89otwY4aEenuyO70t7\n5AsWwy9nxUGcKVOPkgCmq4raZdyrAnJ96v/0tsNPFsDkBRZ4PCXM9hWqB0CA\nfhmF+eMSdzwQsXGBU/1F5H/8bVJsZUVzOJfelwPKaj6+jHazsYwAN+2t9UQ3\nYZWBiAdLE2KI9S9GWV2qg0w6gL3OU10thOmmtAIjnC8/h263ePfEGhsSr0by\nmv3nQ9jaQrV1K43Rmb8048Wn+BB92+WbFHwsiodfeu5jWHutmhbJ1pRzPybv\n82DATCIYMgWtn49uzYO0g/mMpbTacsk9TbZ0ArBUXfoLeJUCgEEitTwfpFMi\nxVYQrHUhg5cbnTLjs3flCpmRRjq1kbnFqiys3gjnouJcSQOmLkPYjWp5rURt\ngWcaWAMjk39z4HGanedCOV6E2sURZ+cIpXafteoEztrAYslq/WOtk0lxDPts\nNM0x\r\n=yVbN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCO/ZpPjy7E2LFLeVIgJRLNDA7UzxKS2sef2zFGK2UFwgIgAjEWPxZQt7LbLtEzyUOSosSoTyLoazVav0tYv28CAe0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.90a999b9.0_1629485002352_0.2941300236173463"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6db58716.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.6db58716.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.7da413ed8.0","@material/menu-surface":"=13.0.0-canary.7da413ed8.0","@material/mwc-base":"0.23.0-canary.6db58716.0","@material/mwc-list":"0.23.0-canary.6db58716.0","@material/shape":"=13.0.0-canary.7da413ed8.0","@material/theme":"=13.0.0-canary.7da413ed8.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.7da413ed8.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"187faecfb35a3d9f67ae8a6ae1c83b5f796d3158","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.6db58716.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-AZF7QL2SwT28IWxKlOEMqqAdoPMfhAB0zzDZkr8kjCvGcu1suhnJv4tn5vjo5LALynPm23kJZCAhESIj9Jz86Q==","shasum":"d89552642678345b99d8d4ea425e49750064af7a","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.6db58716.0.tgz","fileCount":23,"unpackedSize":107601,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI2WgCRA9TVsSAnZWagAAmfQP/2MUk7WXsLYqL3n76Bkp\ntELm+VHmy7YcRPo9zteMAst1FL9evDTdTxsAyWk3yBd9P3qcdgCxt1eFLVQG\n12bYdHR7A9toKitlx6tS6oljBjMYKgSggxHYs3+Y5IRJD5QAzdimY27eXESc\np/uKyiU0/BrMIN03yj8iAnaVauM3OXRzWFSp08AdlWCqWc0mCWbwMnxSWecV\n8U0D572NKexpZZbi0Da4IqmhC8sxZWXsJbQAt4bC4fP5gKfd888/ILP+ei1b\nMRMFReKkMzTvCl8vLTD690TPGrpH4vJ/6q8KEg9l0B9puuRKUtpsBgZF1+uv\nnxaTQruj/MRInmUFoSZrfftSOOr5wEp+Q2BREDJSkxMVHPRawK5bdANguygx\niN9G3LSmRaCyZWpR69ugUYEXy4cxXTgfoduSRsx9drzA+2G8aTTioWLIelft\n2zgd2G/vKG+6FhiDRmQyrqDgqtxdW4ui7iSk2KQXvC35qx+NXUk7efmdH/+d\nUSL56VF+PY42ZE/zyoRIeCeZzynriLaIBdozpuSmFhZ0mIGDYjXOm1wFcXg7\nY64iEDgWdF0jFRnyYJ1/CYIDuZSH1QatnVg/1VLGDkmr6vpKCq3JZXFo4fFN\noOav+8NAoXY3K3/fKYYZ1yZb6boyXQNld1lnEeNy9313TAT4SqqhPXuHa2l2\nInrk\r\n=egf7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIApnfdFV6dXUzKCXcqYQHGfDWCBzG1MOn/OM8H5bvO8HAiBonqxLd0mpR55iWApa0ythgLT2i2aVGZVFg01IgmfmxQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.6db58716.0_1629709728681_0.6912257962507729"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9fb5bc35.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.9fb5bc35.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.7da413ed8.0","@material/menu-surface":"=13.0.0-canary.7da413ed8.0","@material/mwc-base":"0.23.0-canary.9fb5bc35.0","@material/mwc-list":"0.23.0-canary.9fb5bc35.0","@material/shape":"=13.0.0-canary.7da413ed8.0","@material/theme":"=13.0.0-canary.7da413ed8.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.7da413ed8.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"492fb41175c44033912a37c69d8362579b70d081","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.9fb5bc35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tZTA043pwRDuDl3rIcqp2TPcZsBp9vV/8DrPEBEuyhSyoOQxAdyJE1bGGMQOo6NtmV1m3cHjVDqwfXwGwpbzCg==","shasum":"52fd55f953fa89d65d7b398add6517e7dc45a086","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.9fb5bc35.0.tgz","fileCount":23,"unpackedSize":107601,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJCZcCRA9TVsSAnZWagAAflQQAKGIY51bVJC5VKmVpPtM\n9sEybIOd1fUsGNnriMjyFpAAUv4lI3uH1VKGgmo1oPDfo7xItXoPLTaH9wQ9\nG+Ewl3O9fPmd2KPtIkHv9DFZ7vCyeJ/N13ilKNHGSkf44Z2itLY+WT6Nue56\n8EANSIubCPYd1/zSFAqd/BrXmCW+uCjycgIB4NSLwpCW4a4JdEOZyLKxhCey\nsZgV1tzpPcDZVYUnU7z2xEcfLY/G8UICTLuau1RypqYBia0mqys/S/aCBZiP\n/ucmSyLNAv84oIRMypvqB1x7NlJLQRjG+ri5YMKkoNsGLgDoXyctoxcW/CJP\nWonoTNVMzCyn6uYcHsGl0p6eulPdYxFr4BnLEnmEtH+tgqz+8+46jQ1mjK32\nMhSuLq18PsHOqksRaRnESWczmfXrpbwzZ7T0rlkeZYLbWx2vvYMbUNegvkJt\nd2+G8ZhgOomgNK1S94Tvv9huqb+n9v8OSEv8djdhFR2QaHSLz/DeQQdmm1uy\nj600pvRJeVd3zo3SdaaoKMI/97lQwneok0yE/2BNaCXBx/D8AiQOTEjxKSHF\nIKulYhkXP1cOW1vgqsgBeELw3D/liQlHNKqiCdVYvksO7iuVs6BcrecAocTR\nuxhQUtX0fWTrXD15DSkkMNlBEfW6USxhUgFJiUhVLlNoSbtYrvVJxudx6vFv\nrjCf\r\n=01CD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEnyVKEASkUVzDVEj0yRCsboD5/wMbEuV0493Kbo41fjAiEA6tQiO2gj/Jsl+4ntzf9yIB17nJyhrxzzbTQTPxUthGA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.9fb5bc35.0_1629759068134_0.9956187108038193"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ddaa5d8e.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.ddaa5d8e.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.15981e9d9.0","@material/menu-surface":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.ddaa5d8e.0","@material/mwc-list":"0.23.0-canary.ddaa5d8e.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"b75a351219e35d414333913249ef19e87282526d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.ddaa5d8e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3HQZYxV2pMxGgTk8h2MtYdmanOXXudsCalYjepgGLtQoRIQpn8rPAThZAJvbdPqkPC3a2RsLuET1vHREI1tpaA==","shasum":"e5f30952410423c7fbffed51e59d3c2236a25d29","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.ddaa5d8e.0.tgz","fileCount":23,"unpackedSize":107601,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJT98CRA9TVsSAnZWagAAkBsP/1qx+jdgCUkhm9EOWoyw\n5DCredvoZ34h+YrUqY8zIrCTcSy28lEBXpTjMr32xeSRhgscpmpTp0/d68yF\nhi21HzVDFr/p2EyBBPr4q+wMANcLNL2US4xbFTs5pnC4bmc/eTVY0Fcb6yJM\nLj8W3+yCOxrtkm8tZraWIj7X5fIDgSD7LfyGKKkxpuQN36EE8RbIetFt2dbR\nwsyI/T8rBT67zvlvz9gta5tF9q1Tr0TRto8KjIh5xuYDknzig0taAM7StNhK\n0NPJ4AnwtgSQtnbvADXkSyd5z/goNKw+EcAGqHlQYhr37WY8O2dBdt67y0Yk\nm5yt5jT4bL/6h2DX+gLuaW+OhPG1togMTY2o0nMuu4XxJnvxr5fVQGSXGo9o\nrGmPPAa5CpD5k/yxkFDRYymo4Go9PT89qjH/WIT2FKilb8/rLgGopSiVM0mR\n6syrB9ind8F8B+SY9f7x5xaMMSehRMTaUjy8xscI045GcZtnrkO+1oq3X0xg\nJBpd0XO1pf9wuRR63GKViAKejT3ZEJqHFGnWJymPZ2ZLXbhqaCvE93d3UnAH\n+R73EB58yKdPEuskItIm5LaUFMYcU99HR63udxdQ/mQ1fN2hyQX1hhIcMeZB\n6hwbtMmcPwdmKmoIoVBRcCmV5UVSCq/MSxWBzUxC+2x4fAXHrSI5i1XTR12l\n3qvU\r\n=s+fw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDJ15LolE6Tq3WSJj1ba/GBDxGEu2Ywy5wnSYH4VT/qjAiEAssLZi2BJePkEOfyCtc/eFZ1XS7UaAOcw8VM66oEbL/A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.ddaa5d8e.0_1629831036642_0.43113286949007645"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.756208fb.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.756208fb.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.15981e9d9.0","@material/menu-surface":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.756208fb.0","@material/mwc-list":"0.23.0-canary.756208fb.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"f13e06c94f8ec287642a6c4a258c32f5be7a17e6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.756208fb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-6Mkyb5aa02DTUidNwS7iHlvYOmZvUO5WfZqHy07AjzHSQjUi8iKzUlI9QXh+vQQXVCOS9Q8z1LEzOgm2Dq8HXQ==","shasum":"0d87a7f89744e4ff6550330d86a6b737dde0c761","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.756208fb.0.tgz","fileCount":23,"unpackedSize":107601,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJp9DCRA9TVsSAnZWagAAuPgQAIQMlqeYCSyJHFaM6teV\n9qsNDZA6kXh5Qgkr9UnG1FE+uU8FZGDGcQ7UbIib7cvflNIlltcuTRr9ZBkE\nA/RA2CqS0qjt7BfuQq15YJhk7kms7GbZc+CUEvWetTi78NJOqwQ++sprhcWK\nYA1S6TEgfnE7rd03nCORCjVIPcK0iqi2d+dHcQAa/kGMzrLMUSgSH/6HJzUx\nv89I/gWMBe1/h9wjkuXidCeQXIabjtRgUoPoy6qVDUbgK8YsenPS/Z+MWPhy\nAz5MV0l/HEFaj8QN46glb5behqnI8BabnbNKiE4sUQU+teB/HMHAldiVCjlR\nsKFjoZXHO2ijKkgaB29vvqYzkHxnnEwYEQ2Z2Ib+kNyaismq/84qf0kGWTQp\nOEHO0CqJ3AzDLc4ddXy0U8HhSCHKBa0xWQCF4t1jHtEU+NibW71nL3ez06r8\nyX84CXd3mdaLf/pC0agzyMJSVHB2+ND0CM4CmygwfpfRAR5AJVB5DcI39tLO\ne0mPkxYxwB9cN9ccoK3rW2rsjldQKyIzSVZhe/yoL+LE0li5eMX27UmYJHyg\nSHF6vXpGHzkgiWfLb+TH/PWPg+4aHqOLFo0gK62n0Fhm3gSIh/VKWvf2ma3R\nkKEAlNe0jKpI3dmUJR4gjnw+TAB3Z0cbFAoW7sLnGZxBg3o5mcsKtfo7/yO6\nHkEh\r\n=Nk6g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDL+5bFVzuufzWMpDyhyWmlIelKytwTZ1smj17T91jFkAIgFIjKNLY5v9JibyD34XI0YJlldKe9dDG0hUmaEPgpxis="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.756208fb.0_1629921091760_0.3150908775117025"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9576dcd9.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.9576dcd9.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.15981e9d9.0","@material/menu-surface":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.9576dcd9.0","@material/mwc-list":"0.23.0-canary.9576dcd9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"0d9211bc7f0c9c96cb4dc480ff59ae633f722977","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.9576dcd9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-IL1vQMzdMEar2bnXooh4MqxFxs5a2yT8cAsqiBqEvfQ7DpLn+afDUbZLDP1qWqI48wKLKlKCPSXac9c222rzwg==","shasum":"712b775d1b3a629f635353881285b77fc84f3521","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.9576dcd9.0.tgz","fileCount":23,"unpackedSize":107601,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJrnJCRA9TVsSAnZWagAArzQQAJpU88F2n+4Zu6WX1J2A\n7OEsISoNaVxx9/DMi+Ok4khuw/7NjBphHd1VeyoYhlV44nSCod0PrsCxsgC0\nYFZm5koFFJRtnPEuoqMHpvPF7pPZZd3vJyvIwIfbHqfq4MwJbgs0ux1dHlNA\n2fpmqQxvq6fb7fWFLkT6QKxyUvL+fQK5bfJ0oTIM2BVrsz70xZ73IsE/+MQi\nz+6jbTa34bsIPG4ZvcFifNLkZ71jDEGwZZxRCdD1wjNCyxbTr9etuD7tAu/W\nRhn+Ob+MG+nmqNl6k6X7mKHzJiouY4H6e8b48qxSMc/IonF0cKN+wBUCtdfZ\nPUdSoMmbVbSA547gyxgCj6t6NrkqCjaviWDz8IVdHaZajYdnrLxN4PDd1cEd\ngCtzb9n51k4TTjk03AaIlYqxcGVDAUfH0Teclfm5MQL5pA2hnPAIdNwdzJTJ\nsgzg22bifsf1TztycSLIb6SRL3ifxXjnUXOht95I6fl8aDWZnJuS0RVddAo3\nNI3YiLodFK7ANacV4OQ2sVgmenlmW20TfHVDlDJso9/bA4L8czYLt77GnpWM\nhzwOFqHHuR2L3It2Sg8eltHWXyVH3Rhdi4PntCulJf5ORE40yCp8i9PM2ogs\nta0/mgKzkdM9rbJZAiHtOZgiWBpyP5iAThUp3rBq16n1yef3eKlh3MdCTCX+\n5GWx\r\n=WQ8a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTOP2sc8h3FSgxTIC51KweWy+ShBDd/1txt3OXYOJszwIhAMe8WfLm6ihRSiAFH3E3z0YhP1UIP4s2wjjyGKtdrjkm"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.9576dcd9.0_1629927881673_0.351564187559958"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7531cf97.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.7531cf97.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.15981e9d9.0","@material/menu-surface":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.7531cf97.0","@material/mwc-list":"0.23.0-canary.7531cf97.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"1baa3308fe03250097e96c18c61446a8c8014706","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.7531cf97.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-KrQyGKha75LB9NzN6C9p/LOHWjTxKvpQTYJDfXhQVOCqbBYajJC74BnsvMyTfyOKihoPwF+2k6nYRPi/bUeZGQ==","shasum":"a3eb6ee83d8b3327c7b6a1faae5a3d4c27e29334","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.7531cf97.0.tgz","fileCount":23,"unpackedSize":107601,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ87gCRA9TVsSAnZWagAAKaQP/1PZQKavF32/KGg5weZb\nTHyg+kCyWhdwkL+Sv9Yid8VnJ/JwTxdSY8JwQlwGVpjJM2XryI6YAkqJq8gC\nsmG39Q2Dww91kodFgPfQpu10zP542lAP4opQfssm7ytj9ffjrZNdPwmPuNEX\niEh+QXpfBTC0ZT5i1P00ZsJF3GYEgB5TvZ+zT86b6KM38pAVe6p55B+MaMh/\nQA9dTb2xlcssaDURVCPtTTeunBXlPHAXvAfpXDDPlu1A9vxmvRHKDuqQjFuB\nuig4JSICKRyn7Vx/VQRhw+IpajaD4Itxtd7h0xQw0E/cjRPf+IJQZQGXpDTK\nqrBItL3xDTNG9VTOQS8LzwjyYu5f7BJe8x6mtA848CV3l6GBIE17ECoiJCmI\nW169Wikn63iYlY55NpLFZM5ikVe1gh86yKty5EL8h1WDpvrDZRDPXiQYkBdV\n0nVjJ+/MChoeDMzT6+WvJ7Qzjofd1/L9m6gL12p2QtpiJn/scdXbi0C1EvC+\nmG/mYMzabLbloGdiMwvN+pM9tHQHoIIdRu0n2nXfA+HLH6NC9ETf9orslt7e\nKMjdhiZFpTz+m71p21kLYM+gcdsuHl3qOC6ncBFC9n1d/UzvwH8ndUWIIUpI\nZvtKMYIB5iKNVAWcIF+Mi+xoqoYyRkBWMLeG8cw2jPIegaZ3weRQKkrtEUkT\nVpUn\r\n=pEBU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIClBsQ9MImfWLgrCf9sN+PulMOnDf7C0ijwVFrsxhGAIAiAd3ai0zpqIorLfJAxtN14CCGtTbfafOEtbquC7AJkAGA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.7531cf97.0_1629998816794_0.7442988734639318"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3bab26b4.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.3bab26b4.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.15981e9d9.0","@material/menu-surface":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.3bab26b4.0","@material/mwc-list":"0.23.0-canary.3bab26b4.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"1637f7d8d3b8a228e1a957d94d122d9a840a63d1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.3bab26b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Wa6yU70RqkelIvdUQIeo+r7ANYraXMuk8iw4546+owFQ49KAmbvNJlSp5hD3dYCg9oP7OirzQejmWbhO0jzvBA==","shasum":"d230e52ef5ff8a864935aaedb3bdf8e188c3977b","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.3bab26b4.0.tgz","fileCount":23,"unpackedSize":107601,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKAuACRA9TVsSAnZWagAALLwQAIn/eJ0W8et8uej5ZlJE\nGuMNkSuq51WRxY3LluElXAoGF+4cR9qsn+96ksoErvMP5PtZ9HkTj579pFiJ\nA7vAAz+fb8+D0mSxuuBjPHl6eKA6OOVoDU9UAGSKPxaSLUII8yFjSoqdbNzi\nO0Ll4ztr1+52olF/VgbhzZE5R2zrrpFQDlbPpEWXm8hdRLcxpmb0L6sbMnYW\nJIVHMmsoBlxN2MTGD44MIRqlDXbNVKHFDg+Re18dOMZsMSLeghwjueroE5xO\nwMwxgYBZUtDBpvHF0QXDSaI01GXF+D1roJdAEwoTzunshIXt3RW9yQz42QFq\npymN77Tntwg2XbI+3xgVf6bD7L+gCWl8m9LoopSIfPDg73V7A3nDeAUYs3kU\nb8J0RY8fRA+RRquFRc+BKBJd/fpzCJpLH5Njy+xQsyXhC+fZBlh+pYoWDAUO\nl/YSXLpUaavxQeRFpEw2OkJCRGJoI5jl0MSW/wJlFT9GX8RfJ2NJKnrUo43b\nj3xz3wjtB7ERV+oXxhSVgkfjHRor8HvYcwc9S3ob1jDzpR57P2NJtNRtLQHG\nQrDeZvaAVPM1kPmnv6112NidSdFBseYRMlZFKDyEtNvib6NIqOn+SzlEsy3y\nA250LMlRRV8/e6s0cVy0Bml/wRzdsjM5/5ghI3CE0qzTL3UJWcdtpbW5tZf4\n1LZo\r\n=5E35\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmm6gWex9g5Rp0kFRmmOdnlsa8q8v0bAH5g/v5i1hq7AIhAMrdA39bzv017xm1EMh8RuGb3dfyPco+Ees4d3//sPA+"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.3bab26b4.0_1630014336660_0.7426448773438292"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fab48bee.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.fab48bee.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.15981e9d9.0","@material/menu-surface":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.fab48bee.0","@material/mwc-list":"0.23.0-canary.fab48bee.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"4c3b20e414501a7103cbb2397163d4ed1c7d041a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.fab48bee.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jcy27y6tNyvPW0918GFUlvtEYWWIFellzojijNP9DVTC3GOQggMjqng/O9w7amcK7txZwI+M6aUskaB8Uc4mWA==","shasum":"0c7299e025902c75e6f1b63eb2ef1dc5729b1a29","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.fab48bee.0.tgz","fileCount":23,"unpackedSize":107601,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKBDgCRA9TVsSAnZWagAA49EP/iSfkMdAAQb9oRTOTHBV\nE9WnNxNJe//oQSIhEU2SsGPZp//qMJw7Rs6LusZliloLCNvqpMCH0zo7gY0S\nX3SLg8U11CExmQaX0mAiDU23zct8ZaaUUeACMKaP+IYmuI/wZLsSTdDVsO0e\nf5VkZ3qbTMTkjLwhksSOsFF8V67I85HqfCXvmOKQwfvGyR2FbPB+I/E5KoZV\nvrjueB0SCUjpP7rQUTAA3vzFQq/CNEOp4uNkLfXLycSmRKmxKZXrr4AmjCHp\njuGd28Lxcjfn5/B4wGliqAoaAuskq2DKmvqV2/EhHKzqixY91YXPvalRm19N\nW408OuhS83my7kOZiilsCbR31jbei8dr6lo2zr/BgT8nWkHl5lKOyI/PwcX8\n0VDt2Ya2j0c9pIbpEPgG24SksrzIKZKHfOw2xVJZ8eNVweEtpqpClYypZ2g1\ncw7wUsDUAzGOJ8wBKv3p8k9SOTiKuYNp8mjZkIgMoEHNQz7vCEc6Nmo/Sum/\nY5eQLUEqHiIWCto2dWuw30JeiUPH8KtjyLSWrfxJfBo8IoUxRicIvgytXp0U\nSQCpeLIjScYUcuwfExQxdOhPFywKqI/6KhCfAT+8uWfzFP+dwdC2PsVMMVc9\nkdMfHy45ymF9JeqLoOx0LYGkrXeHJh3Dft1ou0cI3dwzOLPdZNkGXQJohH2K\ngNEQ\r\n=V7eF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDE8Yuo367CB12VugqcfpSaXTwlg+qWWu3Qhyqg/U6YLgIhAOAczFKRBPjiVHdSdtj5EdXRlahgT8GIwOlwSsGS5PRt"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.fab48bee.0_1630015712740_0.08404119092142981"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dec18df7.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.dec18df7.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.15981e9d9.0","@material/menu-surface":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.dec18df7.0","@material/mwc-list":"0.23.0-canary.dec18df7.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"5fa2a5aa7531af47c2a307010d92ff5fd27006c4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.dec18df7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VHJQMqfEbksXXPyNc4HZZB8L05lNAXJ7pDiFPWU40RnuyPsM6n9/DudyeN3fGVZ6ii0EJUM+Bfjzv4/dqD6ZUg==","shasum":"e1376622a48a040a279270efd195c8604ae6a29d","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.dec18df7.0.tgz","fileCount":23,"unpackedSize":107601,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLJb7CRA9TVsSAnZWagAA+L4P/3Ca0wkCFV/+VnaOFQ3z\nnUr6ZyHgzVcZ5HDtT7Bmqcg3uLWUJzLU6A9zsQDSLRCmEyGZ2GPMapeToLtX\n687pxsRWSf8eQuDfGEqanR7qb4W5mk3f0VaYSjJKzYmptzEcWKoZUXQyxLmQ\nh6wXuv+iMQ41D/WKLZuOaNomUb98safFHADElhcW5gcYOaI3jYUVCiGKoCog\nNM1418PIVhqqsTymwDkDASlGrGHxlYhM6n/61VjEY20SrJZauSCEmLH1ACWY\nYgN30wW/ZX4GazaVDjQhisCZPCRj/ywKVTSqenRW2x51sl8QpUq3E3SvqHum\nfDlKM7uRMAQSh+mLHCfMdI2nJSD3eFZw3TX4MWgorDp8xlMKI6IoMAI3rMjl\nBWBbO58T64vN1LgtS2GbrQTAF9G6Ata+cKoE+TKDEvfIM3RK7oh9EmUxbl++\n7xfFC1OZUgJEphkO2HCWj8NMUKUtDCDEQxPBz3edhjz0V8+luX2paVDt0JQf\nfxhB2qmS+9g73vJhBHiePHhe7aMyFSHyWqZubUSWq1WXLVdgCZh+OFHUjFlS\n2jdpqdewziOcG0jctWnR3F+iFuRq7j/bk8xxSPn1XTsGQIHLO4ITwKfi3pIU\nY19yOhrKcY/L5sOTwP1NOAdcgX9NjcO/KWJkPpQLkSWuuFGrVui1WHmYwcdt\n5l42\r\n=ySgV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBJgD/6U2PozOHldZRY9QRRTZ7bR0QRd+597XmYbJjcxAiEAo7toSLIYdZ6exnEaXNLg5pO5UATdC+0JWASpBDB25kM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.dec18df7.0_1630312187424_0.9378144086579956"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.61fe5b17.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.61fe5b17.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.15981e9d9.0","@material/menu-surface":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.61fe5b17.0","@material/mwc-list":"0.23.0-canary.61fe5b17.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.61fe5b17.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-39hv38KcxqOxm4h7Gfc/YlRiJADkg95dOF8of8QkuOzZvUXcEe+tw82ALM27n5J8Y/iZW1ESMbznWqUU44JcuA==","shasum":"1e79a31a3738ab2f9b3cf339c782508768a4f64f","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.61fe5b17.0.tgz","fileCount":23,"unpackedSize":107601,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLTGaCRA9TVsSAnZWagAAqEsP/3IEE5R0tbmWx/YlVhfN\nJU4dQtdeOPCpQQ+RtLHF3cftJvfY632El9CXm3NVdLYNZKZuK8DGRUkD4cgi\nJDOhXWHGl8Av4ECikmC1pdLkvdubDg3sMKn8lIbu7lGeTwjvlRKqFW2MvHrK\nfihMviTiAH0YqpBHIB7CUZ24cdueLNzO6GcX1y7Jes0pveqA2IB04BZT437F\nnfr7Tn86NkQUAjZn1XHafFAFUaXyusEI/D+hxm4cEQbuLEncPZo7u6evP6o2\n0YPgqn+S2d67bCh+QjBYQnqvSJKI3y9o7dVvvR5B2jXaHIEdH/g8djtKrBPB\nJoT6lKUqOJA98xvEIqbLJg3ho9FaUcITZQjahOCmm8qe6XBxABX1krbIeb6Q\n7QwPHGefdhEJ42Vv2+g7INjwsBnW7ohGZ/uLj3X+kLdRqcxyqch1eIEpaNvn\nV8AzfnrV2FlviiVNYFgyh86EBcv2jaLQQfc6WnKV1Vx1SpcwY6qzsOgGAGtY\nEomSqQfxVuHSc5t0Pc60WhCzVin5/zEFrLJzCERLyYMv1OH+IsAcL96JWlAC\nFYif/hqDLOuXF8omPkBacV4ael+zQwf/Im1O4c5JzaqaTnPC39vJcTpSDtNY\npQyS8Y+H3Qnrz5NYGapkVvd8SUP3hJZjJQ6oSTMSMrTsaIsQtCpXN4iqRHev\nXwY0\r\n=GSIl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6nyiKIHho6HJvRmyK13grY8jxr+M8a2zhed290HI8vAIhAPyA6PHxsFn72HnhBVyJ9V9TIeYukhHgP7oJM37tQRmC"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.61fe5b17.0_1630351769937_0.6993064947252743"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8c31f54.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.a8c31f54.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.15981e9d9.0","@material/menu-surface":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.a8c31f54.0","@material/mwc-list":"0.23.0-canary.a8c31f54.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"7c390fe40361133076f70c076acba4dce24e84bb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.a8c31f54.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-eiAMYZ7bNetmohVCnrMN5Zai2pj1xtV16eFRCmaS26KbKG2krNcRrTKewVi3PQv4z0qWC8kCEx9A50j/H1kw6g==","shasum":"4abf9f6e57bef7a28d173e53e192fcf649428dd3","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.a8c31f54.0.tgz","fileCount":23,"unpackedSize":107761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLUBTCRA9TVsSAnZWagAAi8cP/AxQ45Fse2ACUmjWozC2\nArMhUt5/cUj264/rp+XcIom1aq+dZI0b96YuOVSdR5FrVgtd5p9XeY4imZcr\n2HIcVVVvdznJOEo0pZPDAGoxGPXmw0Gni2lIveQLZReHeT7Hsd8jm6lTbXe1\nck7Hf9+joEIK9DWECc5/h6wgp9I4ZYzWmqTlnq04pqe7GZDLDExvB6V9PCTA\nm5GAgYJx33yzxL3gwx24/EVFM4fWXjYXzRitz3NF60r5eaxykWWx5FiBGX/Y\n+41FXs7THUbCID+ePE3i2xJ3vAbzfKuJqvc8CdxoiMWXvHfMyvfKT+eTe5LQ\nMMgb7dL9N/3s/GBuF0yMaQvHOId9XUa9WFgRHoQC2gjPUU9JQpFfS3k3nHCy\nuj4GheuhBpycOUi8fBd5KJRujZQTXJajZjK/DUB2UUHdkMf0D+WJYvbbPkkQ\nRSmwXW0xIwaYvg4jjwIkhSDQiAZ6jTHIbw5PH6XSvqaBT3F4XW7Toqye2Qhc\nDrD8658cosayhrDnnLnx/ateKN3y/R2o1lGxyLkYUGBoC0QlCuh6ouEXuv81\nUzAbC5JMnzmz42tkw/jJ7EXSV+TyqjCwlp3AhgxZq82h7aEe+fYxfzteCzlT\n5TAYCNK7Y7j6+19C6yMat6SKmnMxY/EwfIINhjqELdDyaAMojRXAVxKz78V3\nizPl\r\n=xrLj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICruY5XUgurdBNCFt6AaulKstsWy325529QQO+k7vx0oAiBjp3Ag6JazpuCABM/M6eJslQlMyllwefAZaiQxXxbP0Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.a8c31f54.0_1630355539079_0.84325427967939"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a096dba8.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.a096dba8.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.15981e9d9.0","@material/menu-surface":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.a096dba8.0","@material/mwc-list":"0.23.0-canary.a096dba8.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"0979a05922649d16cee4c4ef15ed0c3c3e9670a6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.a096dba8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0tlJw5rripIOKOjyQcpOHJnynzkQgEzPDBT5X7OXqwpHd6l595T3lSsn4TUCbUIfW2bV1R8cCcvXp57d+8Y1pQ==","shasum":"580c8100c125519be3223331bb83cbc193edbee6","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.a096dba8.0.tgz","fileCount":23,"unpackedSize":107761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLqr/CRA9TVsSAnZWagAASCEP/0Um1O/tks9wB3FqiQUM\npwp2LcaO+mBXPHFwku3RngMjY8HnmWJSeHnJbNyTk116wikqLNCK++RwfTc8\nzWZbEQHnuuriZxQjRu5PVzxy4G/iQP1BurWeo8oqY9syMTLpsoDL5bHheJ5W\nOBsDWY0ZIVKGCybrlZkwUroVKaoiPt19vgUWRHh6QDmQR/7t/U0NeIYI7f75\nyG8pxUxPcjzTxHMtSM1BX8HSLD+bre76T74VCiXBY/3REv8P8aCWZbsjHrpe\nDxOH5/YcnMpAobNaBLNgl+74EjVpNJWY4cK4YRCg+/dnFj9b5X2JTdQKrobb\nWzRwELx/jJRGyGxRA3Q0kq6vjPzZePynMAriWGH4DDFJMcemxx8cUJBSnok4\nCuLKnVlVrej2MnJkSKhLotC3MXZHmijzDYZbn/2hilakCrtr1TC2slJoUypW\nDyDTY4KoSW19pkzQDpM8S8tiLb4AAoHPtqzO3ZKNt6jdMPyqq3L1QwJOKhIP\nIfT4TJyUpRHR6So0F+R/6m/kaq3aerZuY3/MBk08CokN7RrhMX+IZ/BmEpD0\nzesWSKoA73m6do3F7t6AXKLirV+rW1lh5RiQjmuq+FDPU1rRJgt1bVXSZBMp\nWSsUJRc1KR9O0LK/ab+uHO3nmPHnXgRcMYAGhZMLvHrEpXapbIi8j1GnK0cF\njEpU\r\n=MD6n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDXflS/jrgn7NHdjspdE0qafBMPSEQ5oGoUr82nH6dKxAiBlnMO4GRhULjuL2nD2XwPe6jWcPQUW/PBHtSRCp9HFmg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.a096dba8.0_1630448383552_0.43906148575013937"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7ec04d47.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.7ec04d47.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.15981e9d9.0","@material/menu-surface":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.7ec04d47.0","@material/mwc-list":"0.23.0-canary.7ec04d47.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"cc39e72f38b02c8cad467741a3eb549b35590ddf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.7ec04d47.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-cmbMEFgn/FYL49mwBUHQZSzSyGcgOjJS/fd0/Pf5PhrqXQ1aoo2qbo2W7xBfuQ4aai/J4RgJm6dRo9vQ6EPdZQ==","shasum":"ec1413bd5758b743fa1e713efe637861f9240f65","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.7ec04d47.0.tgz","fileCount":23,"unpackedSize":107761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMV2UCRA9TVsSAnZWagAAWawP/imAp0oFCS86ILR3qj2K\nUvzk4wgw2ZlU5vuIeUbCHY/sLrUnbwyw12nOIfJV2NsZ2DRxmTce0O26K3ho\nRTgdxO6SWmpcNxrHqKJeHKjeVy0gMaYs3MPPgO5Otk009zO0vXUBcmPB3UuT\nCzm3u1+W7y79hWwKs2hv4HcogwDm31fZZiosmhGDzjtN0X9fSyM6Af3EAdxN\nZquBx1w0ZQc1mc4Sd0LwH1pWrkkznRjFBxD3rpaG0s+0N8NcZQ2WxUhMjyEe\nO6kJhlShNBVumf+RA9wrS4GNikA3ojXJZ4GGFjKKH6DIfhATEXV/SChyVqNp\neYyD4il5acopCYLLv8lDZr/LtlpjJ8Z3Qf9uVZsXVnATZIOWHcc0PR9LsTjN\nvdvO6gTdIJ4pkJA5pmYTHGlr/KRWS3seabpvCLd7zxSoJ2mKV4fYLZfj6L7y\nv0u7RCaFQdDsPRofbtSOGpsXZ8O3VdSKHxsi7Dp2R7swJgvR6lFR2vXe4ZYc\nlO8Bfib70kp5ZZquD7D2kbpua26SuPw09TG6nD7z8cQQORNcFtDluan/qRwf\nBE6oEYWw23K+q3GnomC44j5mPem11y5tofo6KDH32nzn8ZlbnBNoA5jinNpJ\n4oa802tPYXSEyOgB32VjGK7i4Izg6/eX4Hskmrl+UXXxLd1tAhUWJOeGXkHD\n4Qy4\r\n=c0Wf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDC7wrOMabitlytHL/YdrI+IE+dHGPYYedvVmNlqkXFFAiB/TSMvmHlYc1v1J4aMDi3TmMNsWUvH7w1xsQEKh+JFAA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.7ec04d47.0_1630625171977_0.48998763720913696"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d00b098d.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.d00b098d.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.15981e9d9.0","@material/menu-surface":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.d00b098d.0","@material/mwc-list":"0.23.0-canary.d00b098d.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"918e9dc10ef626db369abf76acaf3266d5437d5a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.d00b098d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FCOnnRhNVnhGhiK0AIIqz2eLldzOIyV+7XEZeN/68uWaK2PHPda1dnEW2lbB7tnHEIoZntkECUzr3u+PVVKl0w==","shasum":"febdf3981dc165c87ff37b8aa4c050ce91679be6","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.d00b098d.0.tgz","fileCount":23,"unpackedSize":107761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMpM+CRA9TVsSAnZWagAAYRMQAKNJbJ/zYCbFrfgVWIF1\njihSMsPf9RmeAlxFPt7dAccHbc76iuzoCHkD2TKciV1aDrXdU35lYiINF02D\nX+pPfxZcUXtqUOvka4M/mi2xp1Tjny9h8C+nELhb3aT89TQ+aNDs11mEMrUM\nBUn3e0sex2bvukQ9lj7PLE86lA5SEJ+gnAJ99rdkHCTA9mnhCJQw8Tdqdxof\nQXnnhO0alSTSKOwL2+2mNNqU2UadFJ5lUGFVXNXkH5fGGfKol+jvbEt/lzuX\nbXfs/CfLFlWA5ebe4rXbs8zJUtnHV327hRgwEZFvjkhB2mE7erPEuriIL/iU\nBT+OxXFXq0IhZTP1eIZIJALsFnufaRybiJbNNqPzvlYDK4RMjQTWtca2gAzl\nn8e9gxd1VkNOJrp6GL9lVJM6Ne7QnLv31bbzxRygc5CURex3mGL1bBpnz8MZ\n3HCaWA32qDGpUs3Z/dqTCZYVg01BaLpXge4gk8tkGtwX2FsFRl3FxuydJQdh\nkq+nRK3Lz0qMyni2htNHsPiINsIFtnn8ai+suxf3+0zjPnd9CSiXhVVYMw7l\nYkaoBvvAPk90mNQt414k5gu77gqr9Bjhk8Td3wj/UFwqHfUyLsirJLnHZ59p\nbcmwmp8+PGTMdGY5eIwcT3o07CZGdnI0dDkQy9EqhrwuqmL71gAhQaDgotF5\n9p65\r\n=DMC7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGTbwJ7Ncn42Iu0Qt2W+WnF1O1KgnuH7Gs6UyScLcGQ7AiEAlcUTm8fQtAi8BZSXUw0VC7yY5EBr4FkPWnFGz3BYBoI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.d00b098d.0_1630704446049_0.5808737894157341"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f29b3352.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.f29b3352.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.15981e9d9.0","@material/menu-surface":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.f29b3352.0","@material/mwc-list":"0.23.0-canary.f29b3352.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"ec2a4fddd95f3099eadde4522a67d49cee8d1515","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.f29b3352.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-6F4KSlZmxAEI706GgSnxKkJm0pTSUTLEQ9jvWd6G2qw4qRS+DiSj5xhbyw5FaGDn0tIDgYa3GCKP0I0VOyaRIw==","shasum":"40cd1b3d62208ef910d1e8fc244532e045d2e739","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.f29b3352.0.tgz","fileCount":23,"unpackedSize":107761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN6yZCRA9TVsSAnZWagAAZ/wP/3to/huZTqPLpzx4Y2Du\niITk+/XvMJR14YrCHzU+QbUlCLNLT9VaufGA0Q2KsZ3L1vLvH1KoDO0jCroQ\nzrLrDWiqW2oDmIEdHbdc6G6Q2Q9OPmQ8l4+W2ZQlDZkTnvwgAGo5FFntbNTJ\nazz4M3h0jeDXiDVHxxvPtjLQ7NbwZpkewxuZzaB8XaSbEaj2CNzbA7cf4PXF\nEmRz+JK1t+Y6o8HbwLngNOkSMD1NE2tRMwYbOwWNDjagqJNWUeig/PPo7aII\nv6AWrMI1mSRNO+DbsgY6PCzv7V6rrJfcQlYl66JVi2Xe4T3TpqXupUZZ/oUt\nQcBgVJTXdepyqTB+YD1hcVkI6ZbW4bRum3FRUSOSVREhDFkuPQYeM77b38Hs\npnQG5KHOs01Aw20rB1yL5TtnGkC5gCQDTsyL/b3AK0d6czK94ibx0+FhTd8g\nBlFxOQWvAzHnxe1nKPH/QhbsPTiUa8Ws7wzbwWoe3x1HmjjjgZUjXYOwxZwe\nyX54qvg1l9GC1eQflcAu7DTNJpEm9Aks8qWOMpoFVuqz/xDNyud2ElbJSH7Q\nJuj4HdwDRGl39+NZBjvQjn9ai/q2aBdMMhYQSW+p2GWsgEqHPr9hdikgOtyq\n75lPdG3eNG/jdAeHYx5ZbajHoFVL0winyLuvlWASo2W121nIMdnZSj77B45y\nHPcI\r\n=354d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCskDGSbPZyAGRxfUMuWyjJ6DSqiM05+Koc7GGxsYo4mgIgWSibkRS3nM39VRxvp55MMX3PohtDspWvExsOb36oTXU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.f29b3352.0_1631038617038_0.24613087935394806"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4962a163.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.4962a163.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.15981e9d9.0","@material/menu-surface":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.4962a163.0","@material/mwc-list":"0.23.0-canary.4962a163.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"4bf68ec0db23b3011a5a8c0777452925411e8552","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.4962a163.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FrcyeqHl5XsPSDIG7ZRAVEN/8MzyzjYeQo1XOLHrBQnmxL6V7RGdrr5miuuG87g9pv4CDFpEizF1ewHx0yxL6Q==","shasum":"29ceb0e209de2c7548db69b4b986aa4d48166cbf","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.4962a163.0.tgz","fileCount":23,"unpackedSize":107761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN/uhCRA9TVsSAnZWagAAKYMP/1SZ7hEBY6WVxwppLP6j\ng21D13cZNwpSdbhz5joilVWQSQ7c/TbQeNFCnjSBzsAiSvmgGs1tmT1ucPv9\nJSw+LCX4KqvnZAkUbQPE3k8gKcLtsDZgprerldReds357WoOEjPrEIavHAZC\nQtrlos1jhU4gjVzHLZQhQIk7uZtlFE5CBACLqSsMBtQD5c8hUruAK3b5QcJ+\nVVxm/ZCd2+epdxL5uinHmKralO4/U6VnMGqmipdaSeIhIH2YW5tbEalS/bRU\nDeZk9qqDH5GEp3bY2yqoX5ZkYPSE7FTnt1TCJj3sD4tnoRQnO9r6iMNb1seR\nUG4CFZJHyr1FtlE1yuBPCdWFAnbH603XC5eN8pJldEUqJDWFzLQVXhWRzJs4\noAds//SwtfNZq69H7vY/JulCGX1fnBVSUSfXiw8dmXp6g2a8FQnP4rjP6Z/G\nzRjD9R8fTN+9QsfJAVNzq6dsCVwSIh1VCCTi35b9kwp0h6YLkUzeR248yj/X\ntI1hioqUlZV1ucwSwevAQ37v/BIzLD9UPhmONISDMIdDG/3hd0vG+3/CXk4g\npqcXE/pFIJTW4W1FiOGBUk+kdgG7PYMAfTgAlU58C2vVf53/z44Hyt+/qUAk\nbkZ5yQ9iOkrOeeHSn7JXURRzef09xmEv/t/5Vopf9aa4FLsE7PVdlb/aRjxt\nfu6m\r\n=MJFJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBzH2O2yCs3ULe40O2z4BwZevv8wcA+4fRsRadlzx3+tAiEAmkWpK60ksh7p8pfV5GsK42Sd/SpZPpnHKFZRytwgu2g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.4962a163.0_1631058849703_0.49930384465480016"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.33102bf4.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.33102bf4.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.15981e9d9.0","@material/menu-surface":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.33102bf4.0","@material/mwc-list":"0.23.0-canary.33102bf4.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"6445a1dc819d694a36e630269c7d407b8f021e98","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.33102bf4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1ppyqWxmgCj78Gw+gmWHVIYPJcBd+nxn6WtOe4aXOxeq0Vmtc+G5FkQ9TEAEDhP50kg9vU2GNPrAIbNXpEs5Mw==","shasum":"731762b90e7cc3ce122588209174b8234efb00b6","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.33102bf4.0.tgz","fileCount":23,"unpackedSize":107761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOABdCRA9TVsSAnZWagAAHgsP/0hG0J7an1c25UbRZQok\nYsGPn5vElF3TwCja4xFz4jxPU9O9gie87Aa7CPufrd9xnD4v3CWvJo0mgisQ\ndYyRdnbrlgrzDrI1prl2XoiWZI8SbOEm1LyTqZUCbadqaBCyGYE8nh3KbjVi\nwGfq+yVVLsky4d6vKK8Mu5d8ZjGLnIg+IjT7svLm1/jEJugbsdsrXhDy4Nlh\ndLQCshC3/awXjn37oLYbzZpTeZrJy2d6cKDHO4ucBQ6LW9QpBWAdouLGxLKl\nkEKfl5oLxNiTe51uy/WrIUwDULVw908+/XUsEZYGybfBh5Fs+aKwl3Y5YwQR\noJaNVbGusosJTCZkPRgHagR0BOkeXr3JhEq0N5qRatoEzq3MpU68JMi+H/eE\n0pyFal1xcPwz3yXVP0Hj2Rs2qcH60NRO1yI2keFzKJwtNdCRVRRfimEq6hUy\n6nI1Dv3mrllLt9qVhuipVsHY5l7G3JRRRUmBgYiClw+9sAyA2/VwOIVmnQqe\nmCrqeotHlTPGn3JVUfnry0wRUk64CIWT7xiDZZj85xxDIQwq7UWy9FHUS0Mg\nR/yvlZlAhSnsW2pH/7JQpBgTJawkFE/rytxDZ6ehxMuW3T9LyxQI9GwPSnlV\nmqgWaQyeHnMoT0X4eKZr2rvYyx0KuEHz9ATBuZqj3odXjIBpoevsBfO+ioiU\n4LM9\r\n=JmyB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE4FeSZE4xNidPdfs+pn6xvdfiyiC/BkYsSHNFs2xJMfAiEA5yLkiYD3RYrRQale+ZQZGeKqh9iR0AFboXKmytnYiUY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.33102bf4.0_1631060061401_0.07812401013694381"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.76c68381.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.76c68381.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.72464476c.0","@material/menu-surface":"=13.0.0-canary.72464476c.0","@material/mwc-base":"0.23.0-canary.76c68381.0","@material/mwc-list":"0.23.0-canary.76c68381.0","@material/shape":"=13.0.0-canary.72464476c.0","@material/theme":"=13.0.0-canary.72464476c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.72464476c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"66455113b9aece74b59241859cfad64d4519568d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.76c68381.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NRkg/f8VrxxLXRREbBNUafE2WCYvZQOMM3NZcrl/KmI5oWj0hfMC0WPEeYKucFsnJ/DfQDsw5lcGQqioIKwRXw==","shasum":"4801a486ac77959c66d151c4479b9d43de6e6f68","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.76c68381.0.tgz","fileCount":23,"unpackedSize":107761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhORmmCRA9TVsSAnZWagAA9ggP/jBCoQFRSXvMc+q7eqNc\nbkcAR/DbFR8tdIZ4N7D+97kD6XtDWlEib10+kJyoP6DVgiHwxYgeG8kse3ZV\n+dcsjHKCBVyZQeLZS9icyXnhioGg2KnI5/4/bGnFUISftdH0C/k7CKrwKohl\nQeDWjK+AYsmo5NhhLih64Srq69EXuc47UF72A0zmgByUeOkzrIAE6KiqjNPN\nCmlYfU5lO9SJ5zfcX6UMJDbY7WMOZZ+3DprM7zUGqgXoAuf+vHrwGVzp91Yw\nKDqLndYgv7QxrliWK2cytwD+o4Z+kGuKP1OgFHmewoTtAjXeqrP/ajQJYW3u\nMpRPWeOEdTRMxIoG00rWIsPMTRmk/jwxM0lRE4Xn9mVrukRC3NIaDt6HnKgB\npJRTEJHpSfHg/zQNM49VGrtknDoZNwwl3mBhXwu8bNlDTffSnDjI3MlrMSxA\n9Sp8hKxBOeXTvba3BqCwvYCePScYe6iZXodLcfn/nbrj4cSKLSZCwHY+29Wk\niNYoBdHrI1nq497dLljUGLjd9UOJiXdTPOVQJdTMDryaxIWSgdT7CAA2p1ds\neiS4eEHeUYMHczh+Cm4ZpQmo1TDWQkh0XlPSkv0D1kHNhAGlD9I4UtQEZKzU\nwlBOse/yQVSRTuymhWK6YnkgYn2lNk8xSSfFhJc7grKX4Gf6Anp0ZM4487TQ\nDy+U\r\n=3WSm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHgINVCu2qHPJCu3srrJY1lQvlQ8sxHV3oonuc4drx6xAiBbR8ZZ1P7YElnKEVKF3VqQeI+alP32tW6r/1emAOed9A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.76c68381.0_1631132070530_0.12354016492217923"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.17d51f76.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.17d51f76.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.72464476c.0","@material/menu-surface":"=13.0.0-canary.72464476c.0","@material/mwc-base":"0.23.0-canary.17d51f76.0","@material/mwc-list":"0.23.0-canary.17d51f76.0","@material/shape":"=13.0.0-canary.72464476c.0","@material/theme":"=13.0.0-canary.72464476c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.72464476c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"eac5c1fc9472a1c28736c4d8e0d423e195fe5723","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.17d51f76.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-RrCkNAKMbbktUiSWI20g2Ri8YZSsmp1cMeHILeZKtqCNMYId7yz3kQ9ryCR+OGAyhdKPdYQXF0qfbxKK/IZuyw==","shasum":"f149a400294b7764cbd4622bc0948c572e403337","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.17d51f76.0.tgz","fileCount":23,"unpackedSize":107761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOUbICRA9TVsSAnZWagAAxl4P/1f6LLs2uMM70h4js93T\n2qbBH/UNLmA7JHhaCkmdHRq+qiAUvm1vE3Ol5fs7wfl1gMlJnA9miRND/lRe\n24XHmiKconEjizXJe1pgngm4BxoJzUO9iqRZVKIa1jImVPnymPu6o2P1i3rl\nbGC7D/vZ7PC+O+WvBL+I6FYqTzUaCgzbm3KySEOUsB8i33i4KtPMX1I5DmZz\nQq2U9Ndkd1vrk8oqlKxwY1Yg6gdhh7m6snZ+xryqM9xblljy+BCqMKXisa3Y\nULwI1YXc/CeejT7N10X9Uro6iet4NZ9WfaBdgLgmrNh9xw04W5rvcvfklkMW\np0b77IVOFhve7VbPpIkcuqLzeGmMIrqR6N9UqqkgRrNA/GzFe1dcfE2IS3M6\nKRtlmJ1F6fXaItZyIX9us+4erLS02ul094zI5k3olfZiWCAof2YMzW5T94WV\nUDfUuRcubkrNoOCwyedjx9XsZdJ3yyswuY8P6CZ4YPOSfW0VlZlneSdS260u\nqcmpSEMS0aHWBi6ak0xuDNTc54COz62UToSlFkzwzPKmImSsimel/zslfD94\nAOeKJwns20tKhgsMTL/aIZ6zqvAfJlPAXCKh7E3fY3VR1LsSaSQd1782VbCg\n/ez+zIelakNX9Hvq0sEH/xotFkYT1snVnuysR3CY5bLals0eFiumgltm8qs0\njqOL\r\n=4xTf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3MuZApzgZvTeIL7JPsm0sxwVG5HBdKkxTyMSIE/1pQgIhAIui2xt1+YfTUcJ8El3bZP1JCqe70dId/qzOE4OMOdII"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.17d51f76.0_1631143624014_0.14506508514877137"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3fae6c2d.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.3fae6c2d.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.864798678.0","@material/menu-surface":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.23.0-canary.3fae6c2d.0","@material/mwc-list":"0.23.0-canary.3fae6c2d.0","@material/shape":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"5647a60f5efcc7d6235a12c1bcf6c703db6d00a1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.3fae6c2d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8AL+99Pw6us+n8AqCCoO+wU4/f7gG5sOz4sya61026yBpLBwZXu2SVvyxrgUwTVA8TOUyoiw6KbY8vCPqMctYg==","shasum":"2bdfa1a87103be8d2ad017637a47b5c2534d5876","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.3fae6c2d.0.tgz","fileCount":23,"unpackedSize":107761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO6UGCRA9TVsSAnZWagAA2MMQAJIz8T3l8j4ZKIHUCsz8\ni2DkqMNJ4gs3DOzSrTEGxAWPr51+Q9xB2kldBzvCWavRaMxy/cc0OkIWTL1w\nMBQYUA6FAb6g1eTUUSDa+p8xqcN4s9qoHsGaegRFzWEleEC2eGTziCccTXqo\n0Gma6lL2PtJxT3TQp09Dmzblwbx7YMIuV3KoWjc10Uca24eErL2l2IXea6lj\nxaJks5B0A/Wdke05aOqxbHvu9kJnw1IOBIZ6bGz6tY8evtsfBjlMK2YJRdro\nRT4BaJGzeoF/e9rTWOgSA/1NRSaaRuIRyRyFcoFs7ZEPwczNZ+SJlGJvAgFE\niL464AARb3FR3xvmaPgfsfhFiWg6LKjol+MJ0gWgpsAwsQ2EwRHoL/yFIacZ\nN4dWSxCg/ELZSLgcUe/6nd2lSBadi2T7ff7yODB5Hj6uPDVQiWnnXzb6vZoG\nm0+iK4EldDVQZfC5dg7bq3r5KCeIIO9rZh39/Px9tmkfHyBZwXjj91okCGrB\nqQ+D+TVouhAl8BO+9TGS2az9KMtFYsed6kDg0tXL7WVwrupc7ZculcagnkU+\nXFJxHyczpbrwVM9tcx2magaY79ayUMD1eGtHc/Z2wU3r5LCQkmWeRFW8Ps7l\nRks1jz17lpYc2pnf0RiICBGAcOL2KchRras3bSw5MoXkcl8hEaHBKWIcWjr+\nsGJM\r\n=kdyc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEigeVkwhm7a0ZcKJQO3IpGLeVcqNG34GHRu6zf4f5riAiEA6UD3q1Cq+vth+5+Q0fmR66sQ3abPXefUQNF3IpIIc9g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.3fae6c2d.0_1631298822465_0.9750755888242479"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f1958c4b.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.f1958c4b.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.864798678.0","@material/menu-surface":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.23.0-canary.f1958c4b.0","@material/mwc-list":"0.23.0-canary.f1958c4b.0","@material/shape":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.f1958c4b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1CxTyioG9cbz7C635uDTSMC4H+ve6OgriaOL871406O84MOtnDMot/HCAKktaeZgkqsfrL+t0IKPgbr2+ie/xw==","shasum":"57d3dafbc189688dd192478a2234358fced62812","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.f1958c4b.0.tgz","fileCount":23,"unpackedSize":107761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP6S4CRA9TVsSAnZWagAA+mkP/1amqx7/kf+v5Gew58yI\nzGOS4HVSSG75ZlKnqftWh/uE4NL3QXb3+SgRhS6A1nxohvk4Fw7x/3U6By6T\nQpwogsI8y+VrJVL1Qb4Y74Zu4Fp3wsaaWEjRXSfGadVg8n1Zj4FbMFRSukQg\nx+SSuSrjhZu2tahHrxSC+yb8+eJG/PUrL5P854weiN5kHVdBYPKCa3cuWIt1\nChmQDQFPlC8Jg3GigAbLTfI5vs8MN3Z7LbK+JslN6TxbGeiliMWuquF9SNeE\n1yWRjqb80FFinJ7TOXYa/cb2+IPYBn9d0KtrUHQY097PQ2R1zqwODOXzXvTC\nVamiMP5OfaQ0j8T7y8whqlSNGHO2ZkYPQOYrwQQfjyKJzQAbA1+TqSLBxjQE\n75i+fbDUT3lbzqffnY08ehd3KZ4pV/N3QTyi2/oSBkBGxbqjEX2NyBR8smUr\n4e1UroqwVDfiy4aLAtXhULeg/j5L2RHFq59WBhyITdHOs2jRB+VZwNms8ssl\n6b5HtYCPJN/f7ZCPS63zUt5dj7kqC+kaO3rwZV5EmrY7MAV1f5ywY0StPZ2n\nkfZeZd1mg6j0yGLMtlofWkDqkS2phv4FAnUhfPnmfR1wSAnQOm4l1/DmCYsi\nAvEicBgDqjd3k1vE0G79uzEakZGWRZt5pzGnnenrtL2LOcTXtwq8j22CfJaE\n0e5u\r\n=Q2hI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC92Gks2mb/GblryCYbeNXNIoMCax8nlk/dRkcC9ZsXggIhAMMUzrvMPfZ0yqC764qIc6H+r+qhl0neAhVZzxnwnj8F"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.f1958c4b.0_1631560888469_0.12015589129467052"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78abbd59.0":{"name":"@material/mwc-menu","version":"0.23.0-canary.78abbd59.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.864798678.0","@material/menu-surface":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.23.0-canary.78abbd59.0","@material/mwc-list":"0.23.0-canary.78abbd59.0","@material/shape":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"638a51a3b3f96617a9be7f61f87afebe78d24a23","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.23.0-canary.78abbd59.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5RB1irZgM0rG1Ue7Rmj8potrGRlOlLnpxe5wEB5G+ptMWsQiqEkqmV+7tk+PjnJYUfdWhDc7ppk4rhbM1sfxdw==","shasum":"8ba796a60443c458d3aa6476219ed1b3415a5011","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0-canary.78abbd59.0.tgz","fileCount":23,"unpackedSize":107761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8IpCRA9TVsSAnZWagAA9vkP/A0xDYm9TifHTck1q99e\n1gLQH+G3vrmdk9DH2ye5CuApaX8qssiuJd7RPDWEAQ0pDp6Ok7oiFDMx4U4O\nANVjX7m3TVt5bqpDh3Pau11yf4AkZHvZfI9TVIGMGtW1GBrgjP7t7T+wEEQJ\n5HgqsXQaeo5Zua48POn7EZr/sUwhH83mawAAMegTMoMLH/Iow+pFyo7okr7G\nA4ajTbPcAmGPHjlUdj9RWj5STspXl8kFG8wcofTmKU9VkCCiazhfvIoanzsl\nLZHwu0WBtOfarYiVPGLm4whyb/2Q9VlpcBC3GMwEyIkMkEqJTzhxYEMNUtRh\ni3hYsLckj60H/fEq7cdEQmNDSNCRcisTJHFUGDOe5ZBPTn8SpKZnZi7FYLae\n/TAfsENZzLoRy/WbJ+N636cq0Mg7nrFC50hex1iqgbo0aXN1RjKdnY6UxL1w\nkmMFPTGzpPA0JrTWSikDLGPO4BnDT0fCWLWj4cbCE6GE+ZzXXggITOpuO3p4\nr8KH3ZpTPmLcFsHlm6sBUPvp240qNdnpqocbbjZyzwSd9v2uvk8xeht8epRt\n4Vwzgc9Uf6XdTZ/WOXx+JsVivvGHQH2meRAfFFRTufI+LvO5WyyS/XVkB1qL\ncm++E7B21H3Hojq0V5i+k+IrUJ2Ge5jzz/Qd2CGsZ2zN2YaUli+JWb6LCQud\nS8n2\r\n=9sr+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRi+tZFYWZwZVTKr0XTOtVV/3Ca5FxRlJ5HHMbLXTUNwIhAKTKMgKetZsd/VS1Jhfh3UiWZ+L1MULowAYbpEzSUHQI"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0-canary.78abbd59.0_1631568425419_0.7901407137271501"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0":{"name":"@material/mwc-menu","version":"0.23.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.864798678.0","@material/menu-surface":"=13.0.0-canary.864798678.0","@material/mwc-base":"^0.23.0","@material/mwc-list":"^0.23.0","@material/shape":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"9830d665867dbb440855339d9181b5c323202008","_id":"@material/mwc-menu@0.23.0","_nodeVersion":"15.10.0","_npmVersion":"lerna/3.22.1/node@v15.10.0+x64 (darwin)","dist":{"integrity":"sha512-HB/W7ref5SoKQINWcLlVD+187gv62/P8uxoBgMH9ia4mmqG8Et+IICC/oR0B40FU2k/Q2NhXm9stXDtf6x2wig==","shasum":"6c1ba301d108bdd1f40802bec0ef6cbda047d570","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.23.0.tgz","fileCount":29,"unpackedSize":114387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8RECRA9TVsSAnZWagAAvVMQAJ9WKDgKDrrA5Avc/a/f\nWA2DImTHoBBA0jbyKXonMWKieF4YqamTvV01g6D/A6XTj+n4coZGNggITDM8\nlvcsMl1DS4I0HJm+PRyKJYUaRxq8Fybzpp5bP1PgNbtz6QQt33t8pKWNk/k6\ncSWRC07CRftHTavRQcl+d0ENfA8ETHNm2VR5fKL6nSCLdr0X5snqRIdwmMhE\n0HZ1zWdy9MUw3jaR8CSPR8hJ6xSVmbexbf3i1thZi/6mSIlvKL82VkJCtXcZ\n66voPKtLT+iLrOzZwO092ZBjMMqGiYLzCXYmqHKxZQ1T4S+ziFvdHnATZ35r\n0SfRdy03r9v9XrUT2b4gHyqMikdyb41EIMm0qlQ2cQLWkNSqHkD3WqceAOng\nIxS9WyZdQsWesG7aBaCHsnnyHOMI8VKMfibC5V7r/dF4Agz+NOYHFQBkQbtp\nrTbcUyXoKjVUOZY6R/CnCM3XSRuTGU+wslRTliqlOC5ifp/Q7tlBTa7+JB9a\nPhBux30p6s9KgDCe2bLRt80dwIMx9/jCAqZWDkcXgQv0SRFFoVEhi2Rq3aW6\n8wC6GvR+4p+82gnVFl6+71tYVwCzi/L3Q3zw+knn0N4fvozYlrdUV2D3nbrD\nN5z7OOVK1pLnFENV9QyMOgDPSpeYF8NnmQjVU+z4VXS3hKRZ90GUJzCBhKY3\nhTj6\r\n=ZoTd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4ff6Jw0lukPfQUIFCwxyXSDEjDUfwrAtvDeJITYtg9gIhAOFiZ7Kc+oMCapA1H8S372VG3gPQDlQ8P05C0BpMs+Ku"}]},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.23.0_1631568964163_0.3035819516427516"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9830d665.0":{"name":"@material/mwc-menu","version":"0.24.0-canary.9830d665.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.864798678.0","@material/menu-surface":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.24.0-canary.9830d665.0","@material/mwc-list":"0.24.0-canary.9830d665.0","@material/shape":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"964716e9985c1d08cbf280a6c7a4093be800c67d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.24.0-canary.9830d665.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-BkbtQgv8TGQ2SDvVWOewgnreQ9IP+Th4roUYZ10n83bdgwYRzCjD0hWkWCI1SLb/nFlkRbXY0ZzSOYmDCw7B0w==","shasum":"a5e5db4c801cf1af7b6057a143f6b1c2f2692390","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.24.0-canary.9830d665.0.tgz","fileCount":23,"unpackedSize":107761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8SuCRA9TVsSAnZWagAAibQP/RqvlqRXBXiQ8iRp0+pG\nrHKudRiLRSJXVwEwjLKKm8mZPi0OXz7Y2fcAp7M96i1n9lF4WrNOZM5H6YR2\neY2u89GcLm5ccLPkQT7df9eSBZk+PxP7FxVasivC6byWSH9eCQIEC4up39Rm\n4olcCLRstfFW+99P/GkjiQcV/5ZpOmLb6SYKaqgB1tUXQwhDaQAtkbyLbeIm\nkEW5auuoJ0LEcSoSMORwL+uw7sS5q59joImfXe1ZnYBuYY35wpTAeTtPtJoD\nogP9/KqcPDqSfRLJEVlprbvC+IiUQ6LYcwW4xO5wekeyIfWbO97cbNn260ar\nV6YiBlmODZXhYU/xuMoONEXVGIg84pwiuNcHQ+RuSGs/ho6nXe3sDI3B6dSg\n3vVETSbkcf+SpCb0e192lCErhuJPUtiNqcWowPoqgSehmICOFOsxVboTFfi1\n3kldaiA9PdCzVnjkkMnml/lYhBeHBnEEnR74ue+q+f6kbLT/lU9fR5s05E+p\nhOLn/7FtPuoX59w55vc+5u53Mc6ODXGD9j+iINL/Y95Vrb2OwPfoN5r1AWCd\nYkJv1HdZfI3b19LUiSze5IWWpOSkYZSuSaxOWwkI6VuVT5Njoc66KpsdWV+M\n2KF0zaLjy6t28siRFkU7ye8YVnBCIq3AufoI/X8Xs1KELILZPbO1dlQqs6pi\nWTdG\r\n=QoWv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHqqZ7GTofhme0U3WPgsLimCxkOo3RFrsMQ/m1z7aj79AiEAxXg3e4d//apLABjgecAoG94bPsW6B5H06tGSPVE6Whg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.24.0-canary.9830d665.0_1631569070370_0.9057482847046394"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.20e2081c.0":{"name":"@material/mwc-menu","version":"0.24.0-canary.20e2081c.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.864798678.0","@material/menu-surface":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.24.0-canary.20e2081c.0","@material/mwc-list":"0.24.0-canary.20e2081c.0","@material/shape":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"4912005504dcbf47a4f5fee3ef7d4b37cfb48606","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.24.0-canary.20e2081c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MA5LbutBnJa4+Z/Lf4Hs6Y0FiUQFZpVyE5Nb1czkL8iEjuYYlUYJMsKP/3x6/+mmGlP2Vp2/vicigMyoAhoIrg==","shasum":"893e06c835eb581aaeb396c28afe53e2c55d06ec","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.24.0-canary.20e2081c.0.tgz","fileCount":23,"unpackedSize":107769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9+oCRA9TVsSAnZWagAASzwQAKNLi1GH0Lpl/F853sBo\nxLQX7kD+2gvP/jZXfVkwDeLmfZhQIkD9H+Tgt7z5rxm2qQVvy5YvX1Y16JTc\nhzb9A93FE0l5XMTWhbtYl2ILdGuECL9IJ93AfVPD3Snl84Kc2KYbU5SUZkLn\nyWxEPdSDakIQd66hv3cVUJxHDBPwL2hW38NzjsCJGuDGRW6wbAc6+bei7r8d\nU46lqo6zg+kTWPYGKIr6jf+ieGfxEFT79jscen9sCJHzixYoCnc5KQ17skvv\n21ZmiZffIXKn0dXKBf7NW3bBOqSNqu6hJgK44fcv2iShu4jA27BbziS7XA1+\nlcbYu/6BMFoHEU6Gz4/WQElttBGct/x91TGXGUxTaOlpshS29wSl2TPtCXby\nhmcr3QVJKWV3Zc3sa5crISzlYEJN2RBD8b7O+kIRDbjbUsHneTAzYhmyg4m+\ntj8l3KHssKuhfa9sT8emv3ifMreFAr0L2bwpriG7yXr80t8R5g99LqeRAf9C\nW48n0XgQUKHjSAZsfMDeAjs3ovruM0P/noVoWB6qOQODmMH5nEGhdFIAaz6v\nILdGCasg0S1WAn3WoSrR6Qrnendr4pMMK2Pu3yo8/hL85KMsRIJE592VvpgX\nf1PpicKmCk83uRW8NxXfwwHpyxQ3Iy4UcgeTciiiwyQJOFT3RvK2vvNGVXc0\nq+ga\r\n=o7dP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8QL1pvKecKj4ViWTj73aYKMRGbA58TepzXSFYdBGnxQIhANshXSG92pncUiQb70jrRDs9E7CiW916vRcuTph5QH0O"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.24.0-canary.20e2081c.0_1631575976529_0.3310926620734922"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.583613a9.0":{"name":"@material/mwc-menu","version":"0.24.0-canary.583613a9.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.864798678.0","@material/menu-surface":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.24.0-canary.583613a9.0","@material/mwc-list":"0.24.0-canary.583613a9.0","@material/shape":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"6362ae780108c56957ae78e7b17d5a13a17b286a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.24.0-canary.583613a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FHdtIm7SOSO0sCDZKRXsHB5e9SKOrBBNfKjFe4L3aRpqkux0rGXA3HpTbOTwf6BO8bWtHkW7Hf0ZytDENcVAsQ==","shasum":"5d654758f783471a1a00c5235520d13b631c3ceb","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.24.0-canary.583613a9.0.tgz","fileCount":23,"unpackedSize":107781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNQgCRA9TVsSAnZWagAAKHgQAIpsE6OZrXhdq7PQNiii\nE2tcPTiRnXTvQfiqB33fwJBpw0l0nTonYqIlXvoreUB1CDKajhZkH1V8s5Zf\nBjYEyKxrcfaGe2GmvQQFrH9OEpJNKqZ0L9AFIn6fjFp11TkfWScYYGTtvGdv\ng0o7tStTwtFM6lSxmrQJd+Sn+1qk9+REB2NUf41LvS6hDXJT/2tByx1Zfw0L\nhsf8qzEchxv3OjQqAFBiBuARzLd4nCn/5orC0cc1PalqBEcyQb8cLvbdtmgV\n2R/ddrZTMg8DazLL1ZSvVyw93Rkhij3r/sdg2oCAY3NdT6q+QhvbWAt2Ju/P\nh4RF9QIBSKhqGvYgrg+qlvveXkaVXczwVsgR4KFi7Y6in2bzbse7u2M9jASz\nseoaIk/T9wDEKPogq3FD7hqpkdeWETxl3ob9aDc+3dcr98gXFT0X7a7O0ea1\n9iVENQiZa+4IGcqSBHPu9d5obB+yw+44yvNQDt/aGdRHBTICMeRwA8XQTBRl\nJLD/CU19ra6NLktYG2P+BgsIieBCVtgcdyProEmysMCXw1Nz2pyZrwTdEq27\ny+VpQd+fR478ijDhGupl9B95yJtu324Eufqu7RP3sJCdUCCUI0l2NBjd50i0\nvp4zAlOIUBgbi648+J916FwB4OAa57Oq630AHQQ0QDozPNImYc1gQryr6w5E\nZkNG\r\n=gL6h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDP0MKw9UU72tf1DQONgR6AJpKsnL8/J7LUeRkCRvApgIhAMxI3qwiAuAxZXbNxY+Xk23xauzSyWi2kUuNOg5pavkV"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.24.0-canary.583613a9.0_1631638560466_0.8826717475290482"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.0e1bd56f.0":{"name":"@material/mwc-menu","version":"0.24.0-canary.0e1bd56f.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.08398f880.0","@material/menu-surface":"=13.0.0-canary.08398f880.0","@material/mwc-base":"0.24.0-canary.0e1bd56f.0","@material/mwc-list":"0.24.0-canary.0e1bd56f.0","@material/shape":"=13.0.0-canary.08398f880.0","@material/theme":"=13.0.0-canary.08398f880.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.08398f880.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"0ac1a8621875726916642015e273dc177d29abc9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.24.0-canary.0e1bd56f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vRecGJcGY/wGAKzmRJ4ERSKHwtAMnX2wN9c1RIxRSUQR4lWXJxQK5sqWLveuyKfenazyb0M4IQgatdl1Kby4Bg==","shasum":"666d75f6588e1645a4cb0cb030696160b09c44ab","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.24.0-canary.0e1bd56f.0.tgz","fileCount":23,"unpackedSize":107781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNzQCRA9TVsSAnZWagAAaowP/Rmj0PLBZKpgYCZjQesU\nhQERguBpCzPTaAWzKjnceftTLHTmTRLM/hF0jRhf93Wm5fnLcvvT0pt5K3pa\n0XOCi+JZgpwj2cl0dMN9IHTksm8SirfS0oxbROYiUn6sqHIG8K6PaulwKuu6\nfeNtblJg++pA0jlkQs7v9KPxUtkcNHghry2FliUJKLTja2NP5nZxea/PCSW3\n1lK9WmzJLXUBRX5lAcENNwOCJWeS+aVuqz+DwS5ud1FaHo3MQfw3X14QZD2V\nhqZ3gA1EhWSZTlLYFd0sBsfRYMpIdHSKMwdX3EhupTfdZJEWz7Q2N6OULGNG\nob2nNQjo4iH59+XvAPz/5iuVTFPqulvj6obWCGiGroeLtGeA6Uly5/1UQQWS\npUHN0bghTTO/gndE+W3pMMaX3GhAab2lw78Y+cyRR+23uw/BkOFtrLrmqeSD\nj0pcMwmzkMKcK8pjGSYK5yA7PMk5uRmSqCk9GgmW7hnVK8mm/rU6Pm6+xIk8\newosD4ViPHrxs5D31TOnQNfyLGs7+9I7N9LfLwCxPsKKus1j8YI5iu4OF3uq\nDqXTnjvtiKvNbxD1pkyvwaZA2Te20YIo+veN6epinUnfZczb4M8wwttNIBc9\nBYt6GN6dDz0+2QQZETxCOWhtfFcXFJ/GMJzQ2dq4iwz7bPQKwDxVdoLoYGK7\nz5gt\r\n=NQ2d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCc51FEh4DNyr5544oVkwfkHAAHXrOGpyBf6XG7m04NCgIhAKDyYEocjbSEgbLOKAkXTpHlTHiFLuYGpDqFOs/9lrNd"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.24.0-canary.0e1bd56f.0_1631640783888_0.21075664785119042"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.7bb1818e.0":{"name":"@material/mwc-menu","version":"0.24.0-canary.7bb1818e.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.08398f880.0","@material/menu-surface":"=13.0.0-canary.08398f880.0","@material/mwc-base":"0.24.0-canary.7bb1818e.0","@material/mwc-list":"0.24.0-canary.7bb1818e.0","@material/shape":"=13.0.0-canary.08398f880.0","@material/theme":"=13.0.0-canary.08398f880.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.08398f880.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"b34bf652f1b82b80ec01a0ffcec5dbb2dc950485","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.24.0-canary.7bb1818e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-C61jcm8oZOF3WYMtZy7wIrEyFsLqvAgnDC/iwqkRl3ajpIQztOVhXHTuE+1a8JoNYm3hsvpRX7ynQN+RWP8yZw==","shasum":"1780d56f04c816e4a789dc7f3640426fc161dad7","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.24.0-canary.7bb1818e.0.tgz","fileCount":23,"unpackedSize":107781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQUAWCRA9TVsSAnZWagAA36IP/ArBhZ7XzWB4NRFCbsN5\nkiV4tek4Z+t42RqLJoiq3/KZwKJBTwEgnFdaiiAgqeyWqg/emqq6OpqqfsGq\nVsX2sL/V1MVgIlfskNfDdqmWipKD13KtqJv/qSSbUtYn134OBC8SdaVDL953\nlxPpq9qJblwcWtXXNgl1QJkQ32qDOjLDhrO4cQp07MoemT99J4rjUXCvJQlH\n99GWr//iNCFDFjHeLF9Qzlp+ZOJ93Tt0s5gWioCN3DNkhsdb7IDEj8njDhAw\nhg1s8CcOWn/wMpH5d4JFVWv1F/D0bWsCe4Mn2vCpmfrwP8BUGE9wQMo3d5/l\nyvLUxviN4mNq3Dp57mPYNZLEqQ68h7nw7y3TfMdtequdwOh+naA5MiHo/vY8\nt4heAP9tuEJd2Qxg1BMRaOjbYTKuEOufWdOCz5f3yp37YQHFbjjA3pbMyAJj\nyk6wBHIpYbRpwg6rt1+lNmkaM835jtixnU+yYeCqG/r+bGkxaIF5faMEO8mW\nV/3j6tCe/99S6NG5szt68r+3MCN+JCusS64RVQfx9Dk7V/sZzb5cZdVbKwt2\nth0AcypDlwVBX4UcEuUSL5ySZ3O72e64jjnPGGA+z8vfD45m2qRijB6tP6Ev\nIrCVO1IAgTXCVcRcLuF4NN+BAkbou7WWxfi98sQtiO4VLwt49kS3eaSrrCxU\nW/e+\r\n=BtIh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCc6/dRIDefmMCqs2gMx90JndiSZYrK2r7YTzsLx/+peQIgQXkMtBTN81gClcZ604TvjWdoFmA1UVXSDGq1mVrdjOA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.24.0-canary.7bb1818e.0_1631666198165_0.41556843799034615"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.b5e665a9.0":{"name":"@material/mwc-menu","version":"0.24.0-canary.b5e665a9.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.818f4ee93.0","@material/menu-surface":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.b5e665a9.0","@material/mwc-list":"0.24.0-canary.b5e665a9.0","@material/shape":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"1098b7010fbefe404afd06dfc30b7b30db59b092","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.24.0-canary.b5e665a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-wVkH+Pjla3twJOXTq0ddEiZjGlDEuEUIWGf3fnpPZ878DnE9qYdEf1OH2P0b/ahtsMzfug1ghk2gr36+Fb3Jpg==","shasum":"28d66da27d61e4e8b24ae72e642aa024eced2876","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.24.0-canary.b5e665a9.0.tgz","fileCount":23,"unpackedSize":107781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjfkCRA9TVsSAnZWagAACIMQAKDVbxd3sA5LXss4KE9c\n0VhzSCWf7SDQxwBCrVCrsEKxSR7vzYQXjU2GpvRIPXCP+kYydn5YQBZzo68X\nMKvuOCbakOUHj8i6gQsZid+FCDHgBi5ScYUbGxMMITQFwboeb6MxQetnOYZT\nG2eVdRkOTR407j7qpcsT646B8T52mlRsr8nAspta3sk+T7WCmgUeSjmfrcIe\nkXiqtT26cLs97gXe1amQ1h69KUax0MTmzClFmXLbEXLDiH83rRmOCpxbrIdF\nsGCzHeVCngoHlfmdh86ipkAaGTOmK/+CDkAsQ8JqbnSckks8zJTc3Q6u1jmV\niMaQFKHfr7aHkl8UdJvmIBWWrGWgN+vlrRRb0XHbIYRG/V/TsmYksZlZAC6C\nti11iEkp8dYcGLWR2YxCrUUyjckUU14OB1SrOZamBCsOc6LK/g8Wo7+G7xIU\nR43RVMn4y487BWCSwblurGpmNR5luGGzGMN38n0aBTEPQbRjhva79M38SjMX\neNHJshZ/OY5NtnPUDPHlpEeNAHruV+P5W5+3yoYiMWh8AeAfH0DNWu1VV/6J\nS8/pRotIdbh/+oNJQCju+UZJwPpzK9E1kFVd+xpyTbo371Masyx30Lr2lOp9\n0rRnL6eAifvpRsD3HtJzTVBi43CXtUoan92ojfjL8/jr2K+NS6UxlidcJlhf\nsRzM\r\n=LVDb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAwL9vjxuNKhnmOZQaMXckkvD21md4bUhwJjX5v/h2RlAiBKPBhsOcVV+3ofdNfhlFJobswT6tKoWc3ZJVa0ZX23GQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.24.0-canary.b5e665a9.0_1631729636319_0.9305247260732705"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.ab1e177c.0":{"name":"@material/mwc-menu","version":"0.24.0-canary.ab1e177c.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.818f4ee93.0","@material/menu-surface":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.ab1e177c.0","@material/mwc-list":"0.24.0-canary.ab1e177c.0","@material/shape":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"afc26bf1f2c64cbe713e03a55993e7844eac59b4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.24.0-canary.ab1e177c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-aQOlzrwPMn/t7u5OhFrRtDd1PzL/8CAW+L1VelmXzovGo0HGJchPevac0E7VGYtW5xPE0rmW6AHP/M5Z025cKQ==","shasum":"aa0a0081877ae7bacb36433a51ea9d3375a64a2a","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.24.0-canary.ab1e177c.0.tgz","fileCount":23,"unpackedSize":107781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQj9UCRA9TVsSAnZWagAAHvoQAJjidkkD5DS/pluxsGQn\nIUPF3d0K3P7DLAaHwOtZyNXU3IxhHgWrcFW/NjSkaDKQgr6h+kZGHnCuAAx6\nMHqYP+3/abh+n/uBiKJXTC2kx+Vz0KyxFNbPGSQDdl4izov7Kf+1wX/QFwXD\nmG8AVHLcyq4vUOM/GoMkQTTABzBBz4HUd3o4bguk55alF93LvBHuvAGFTufG\nXclkj2FClIxGI2YgeQ/4a2llQFUy3TOclXbvgvE6bAyAD8GKQyQ0lD9oEKID\ngAupUGGw13Lq4v3VzlYQ+7efGsvfQjHc79EM/Tdkf5JaxZcBG3muIRN1oeKl\nSzYX973Y3Ka5JxguOFiD9veNGcdP0Gqy4X4hom9+Eex+QfemTzYBCpS+QV0D\n6hUi8hXjFd3rqQVIhdAVVHgPmZY46hZ/7PnPcip56dv1irIMsMThZ6k+YVLf\nPVrvHTEA98C9RXHpHUw9eXI/P2JfC6EhjoEehSYtHe2yYwivC3MqSpfP+uq/\n06yVqKPrruLh/MVLVoxtA996JF4CKaeWOttcxGRFBRppQeVgDRpbpNNVTvzf\n3TiPm/5BpGHi2btzwl0dZHFzOi9CeraJiH2y//zblpGwakj6TlttTRCm9J5j\nMhjrn5/dPQZuq7t1nSUdqV9mA2DsurEEV0yDkWMfTDUyEF+57q7q0y+/vsu5\nsw2Y\r\n=zIIG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwvKRRkSDWDmZ1gJrrHIj9vS3VmgWCP8juYlI4Wibs6QIgSsYFaFUMm8gZ9BkEd2/OB3rO1ms0FU1GucMo4VJrVc8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.24.0-canary.ab1e177c.0_1631731540274_0.4740095364267849"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.8dff8894.0":{"name":"@material/mwc-menu","version":"0.24.0-canary.8dff8894.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.818f4ee93.0","@material/menu-surface":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.8dff8894.0","@material/mwc-list":"0.24.0-canary.8dff8894.0","@material/shape":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"bb2f0724a85956f5a92c61a18390b4616e0ce836","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.24.0-canary.8dff8894.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-kvUhJSCI3mMYoN9W8a6wgceKlLa98NLDvr0r3hLSGnz1xKD9kDN/8r1k9ma3Uo2hKcwp5qXEMPzOxul6+Fkp/A==","shasum":"514a267d7ec035825794b612c077bb81397844b5","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.24.0-canary.8dff8894.0.tgz","fileCount":23,"unpackedSize":107781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkTfCRA9TVsSAnZWagAA/KkP/jyYE4sUyqrc4aXMKRO/\npzeIeYOFsGq0pS3eB5lG8011lN5apHNlAXPY44bCqCwUplK98GMP9ijC48nS\niy+JQsa6bvN4mLGc/PuudQG8d9HMiqrHJqb0VA5kSaC5GEbu6PMuhuhlxTM4\nnWULk1Yp/+xi+KAmWqFHyBFV/PSfkLxkSK+eJ90mEBe8s388/cTSrYlgahy0\ngohMhpvl69pb2m9HY3jYByfWC7D+XZK7m2Yl7wpkdBMeK5/nOZPpby4/lxtA\n3GCRweGKeDv9w/Y6KJf8psqX7WMUn0zu/4hhV/I79jvZQNUYgaHbZy8roN0Y\nGBjzWK0eFfqS6XM9PcJeykCvYapkS7tdO/HdcmrQyNYvuzP+RbRg/VhYr3VT\nziWFMEF7gbK0oR8rnAs9TAthJY+gZLjGX/EbQso9fE1T1ihHBg2djZdgzLLs\nKV6Vn+DUUD/neL6Ij8iSlN3qdrigwV5Ggcf/Birq11vL28eojVY4397PeQFl\nIUGoX7C0aeiThmdTArml6DUB7c4ijwk8ZFXg+Aw3rCE41empjm8d3kEMSiN9\nRmF1XpNk+bEOrlFIyKTWK3u9u4gW7DDaurfbeWDsV6V847fpYK6Oz753JA+P\nZdvT4dUerlzrlR9aztx79q2n7mcl9oz+uO4zln6S2bSQdbnAL1fbcBvhnFEr\nae6n\r\n=oU7b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICrcd1G3vWMvbjh8+xoq7t0uvcNDXeCZvs2W/jqGlRW2AiBi2tpXiFV1y8mbH3mV6anRPslPPibDzZ5ey9cdaGJRTA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.24.0-canary.8dff8894.0_1631732959305_0.07957515022997463"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9cd7e927.0":{"name":"@material/mwc-menu","version":"0.24.0-canary.9cd7e927.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.818f4ee93.0","@material/menu-surface":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.9cd7e927.0","@material/mwc-list":"0.24.0-canary.9cd7e927.0","@material/shape":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"cdc8741747c55134790f2334cd48c000ef607804","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.24.0-canary.9cd7e927.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-gXHucgr4DG4LMrLrETGKMqahxqZR3cVnDmePyk6ZA7VFs2oUYSis58/+rCnfEvePB7Jr9CBAfakDN055ooPnpQ==","shasum":"3822f245ef4d405f68b982657d4463b9accfeb35","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.24.0-canary.9cd7e927.0.tgz","fileCount":23,"unpackedSize":107781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQlh6CRA9TVsSAnZWagAAam4P/RQYMpWAQU+rKQDbC+FJ\nSV0Wnmfy42LmbMh1fCvaMdH/DGy3wg2D1ewNtnGJU723b9dUl6ee1S/GExso\nqq5c2P81o+dfO9/ojdYKyXARdyDhnlroajO7sO0WN4I0yMWdkq5j1wzp8UGz\n8szzXGd+vo7CIO0CFv7LxtlsH2LcoUitS708RzeI4oyAO6s4RDFRPTmclhoC\n09nZaBFtx4tjWm/OmzS/6d9NUov/8z9zgYLNFIFWBAQEFxjEC8H0aBQq/o5u\n2crB68viMtVeZSEPnoC2jL7HyIHdtYeMknlaM7e77cNjhiGVPhDGAxk77ozx\nO8VDxR9VpA+FgCTD81C3TaLiyxlbNGssaAgPQNCvb+X1X+c42HUXIERkV4CU\nohOcEgLu5BlIv7qPttXxFTF0fvzuQqjXxWgMjK1BOTDSmg06r+LacgH/lixv\nLv2ugDLkG7Bu+xHiyI395WlEq4ls4O0KSESmN/7gd2rKIDDISxobmljo6DeA\n8077t7Wj5U24VKr1pJ3Xxbr2JDX7DpRnq/1UtbAdCJ+jR/XPTE1lt9Pa1ksx\ntROR1l/COaOq4FoWQxh6nX+BNSuAlTpyIppHf6BsZD5TrkxVs8h/dzk8i2/w\nKTMRV3oE9k0ShBSxJQSwdOsIPCsDWoKJ9kROD8Pyj24807pP1XQjnJFtg17p\nwimw\r\n=NnsJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCS6xdMkOInw4dNJ+pNZ/6/8eNFjlgGIKOZlwRw4/KllAIgTu9g0cBrO/L9/e0nbdlRWbbuupA7M1ourN/rvIQo+Eo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.24.0-canary.9cd7e927.0_1631737978579_0.7305981708157079"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.a7132082.0":{"name":"@material/mwc-menu","version":"0.24.0-canary.a7132082.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.818f4ee93.0","@material/menu-surface":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.a7132082.0","@material/mwc-list":"0.24.0-canary.a7132082.0","@material/shape":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"efa498c7c84be94afa4d7c50d5bc525723212e88","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.24.0-canary.a7132082.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3H0SEe9zSffblpgmugVQcifuxRTOPjsywL0qcEi4Qz9Xg/5zzOx7hIxkD7QK2rbuziiFSsiJ1zSnJ/NcQLj9OA==","shasum":"50cc4ac94d237d89f01f9bcdca4bae6c5d8c3882","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.24.0-canary.a7132082.0.tgz","fileCount":23,"unpackedSize":107781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmm0CRA9TVsSAnZWagAAK5cQAILN+V/Mb7zfi6ahAde2\nQ/cy1lf6UNZBmevL+r41g28rXWVWB9ut/RuH1QGP6L916uC5d/pjNUysEeUJ\nZVpffLJT3J9H8qS4qE+rmfWRoqkU2hTxwiDZ2rfxeAhkfZSsU+RdBNdKG/km\nSuUf+1+WTulTQEa/iAg/pEVuJEJmpku3rd9G77Bp97sR+QKK6y+1qTRfi/80\nNOoBrs/oTSW6PGxyugj/am1+/86T5ea3zQ3cKBfSOQ3xKSeURgE+O5rUFEM6\npydG2OCblnYFegDb5H17jx43aTd3Xk57PgwaAvzucccmDjblUc0ltU4dz8Ij\nQ3zh/MBQZt9stMwkp2eoIf6uEhXBhpXdCszdC5nN80QSxEcaPzDyaCJWktE8\nkzvUMRFFia/kEsyadKYLbbbYJbL09awTKoT2aAszVz6ZAG1Gqb9lRQor06Ln\n8ClukyaPWfzanMIA6x2CVQ1V0Aw9QWHYEhs7HmsT61x8MjFcxSnSCtf9cSPg\nRxP4kylSFyIaoPYm4bF4j2huNNXup3yU16fkCNiQbmmaHXdQSWP1Xi9ZuvYs\n3P95MagIOZJVnd1oIQrlwn4lccR0mvRDW7UVQw1nUaaQyGHPq6CV12EhXfya\nnj6HDKM1sZKO4olKRI285jiJmyG9eC037zWJa6iTV8pWmuwEbebp2LlLfGDk\n/Z4/\r\n=LGWK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAs9U7f4DT71S6SHb7lv3gSb3qtY0PToU1YQL5wY+pSFAiEAlIIO0x8wSzN6b4dGQJrElF4LkBFykFr1Fd6qtE1+Gdw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.24.0-canary.a7132082.0_1631742388788_0.22726151595051114"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.cd9110cd.0":{"name":"@material/mwc-menu","version":"0.24.0-canary.cd9110cd.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.d4e16a6c4.0","@material/menu-surface":"=13.0.0-canary.d4e16a6c4.0","@material/mwc-base":"0.24.0-canary.cd9110cd.0","@material/mwc-list":"0.24.0-canary.cd9110cd.0","@material/shape":"=13.0.0-canary.d4e16a6c4.0","@material/theme":"=13.0.0-canary.d4e16a6c4.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.d4e16a6c4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"fe7dab0d93d6598d6a6c08de182cb7e3245f26b4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.24.0-canary.cd9110cd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MWD1K3znP2N/d3lf6fgrfRiFZRNs8Ltl+hIE5ZC/K3Lj2QFWmG98ECyVxNCQQR0cq66ZDQeGGRmcC8aaxMculw==","shasum":"11d365b9b1eafd58318edc5dd3f062ee1778a915","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.24.0-canary.cd9110cd.0.tgz","fileCount":23,"unpackedSize":107781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ4LsCRA9TVsSAnZWagAA1EIP+wRipzunKm8x2ojMNdKJ\nzkbmJYfjCpizgE0GaoepTPr4bfghMdF6MGKQW20dETxOzyBDSCgtcqdGxnRJ\n3PR7VsI/FqVpKEChdMiICj98YQ+xp55HvEb/jqtOQtqwbZFupqkZzblKPPng\nBZ3dtUE0t65AT+vo7UOYmLey5xwsFDNP93mmXcpFSU7oO0ZdB41rz93P70Sn\n3s46YAavSb4hQo8QTjmEuMvdJffMQzGGyBZ4HjZ/Yf9nxKBI7xC/LUHjJQaW\nqeLxDulX4UbXMW8rkdwTYWCjhjYlOyG/OXiSzT4oajN5rNtdoW5/UtaOe5kp\nbGHxvzUKXjDtrmzAoMRBIEY6ehLQMZsbjZm3Ur2fjaHOW18U8CE7GcZxRCvd\n9Y6+ZZ0UQhQJvA66vQTXk/aTK3ajPeG1k+2yZUQKkYvi+wBuPPNvaIvDtjX+\nTUsYoCvWF942+XcL60cRXzwi1RQYxOr+QSlVpb7bc4ogCsAGhtdU9/AbtdCA\nyljZEhLfGnSp9EtDlWNsdFRn8iqRkFoXSfOx4oZzccD5exjZ+XkIgs05edh5\n0OvgFgEQxB0d136lKXesyeUX2U5Fbe90XpwRtverKP9hdN4YuzmpM6zfWeFJ\nNPHTlZngD3jTqmEJgk4R2ERorD+v9hccUWsCDP60m5ZJpBBNxj/AgoMN0j5A\nGX0t\r\n=IfMu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1VdGVjwHvitOC26hPQMK7SBWFucNIk2jEKAdD7bNjXAIgYV3Yg4JY7orhRySpQvHGbHLoFdj7uwwwR4agF7v9W0g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.24.0-canary.cd9110cd.0_1631814380076_0.17378913651838057"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1e5a9883.0":{"name":"@material/mwc-menu","version":"0.24.0-canary.1e5a9883.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.d4e16a6c4.0","@material/menu-surface":"=13.0.0-canary.d4e16a6c4.0","@material/mwc-base":"0.24.0-canary.1e5a9883.0","@material/mwc-list":"0.24.0-canary.1e5a9883.0","@material/shape":"=13.0.0-canary.d4e16a6c4.0","@material/theme":"=13.0.0-canary.d4e16a6c4.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.d4e16a6c4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"5b1cd8120da2d6449203e71bb01079f709aa19bd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.24.0-canary.1e5a9883.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-2+3mEflViGxX2ZtXCgucQ/zj456x+Q6ZkNqKJY6ROmYW8kj/HPJjPuWBqKGtvq6ZU462sz4+iq2oXK0j9tBaCg==","shasum":"22fce83b00acd9b8f1847bb2a655cf723cd5a27d","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.24.0-canary.1e5a9883.0.tgz","fileCount":23,"unpackedSize":107781,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCL+CgytELDW7OpQoRcxtRkdmo8YIAyiqGUnk99MfI2iAIge7SblNPTPMXdH/Prf0YGXEZ0KPTmVMvuIpsAx/U6E/M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.24.0-canary.1e5a9883.0_1631911176179_0.37943441950368473"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.32c830ee.0":{"name":"@material/mwc-menu","version":"0.24.0-canary.32c830ee.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.65125b3a6.0","@material/menu-surface":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.32c830ee.0","@material/mwc-list":"0.24.0-canary.32c830ee.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"72f380d7ef6cb00e8a03c42048cbf0cc09820ae9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.24.0-canary.32c830ee.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-TOBelmMn8hNVLnqalIEqOme2onXAKiuF9xrvTDMqh6CooZ8FeWR+i19mMZKK6mUR3r3e9GXhGJUpWJ6EmFS+cA==","shasum":"cba7024b6745207932fa1650c3930aebb522ea6c","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.24.0-canary.32c830ee.0.tgz","fileCount":23,"unpackedSize":107781,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG4FglU4MeKm88dM+beM5eGuZmbScC3y9qwuRj6+al7BAiA0WSbc+7kCruv+rlpVnzlkkhJt4rkT9oiU9vPYCv8z0Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.24.0-canary.32c830ee.0_1631920155456_0.009211270846682496"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1de87bb7.0":{"name":"@material/mwc-menu","version":"0.24.0-canary.1de87bb7.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.65125b3a6.0","@material/menu-surface":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.1de87bb7.0","@material/mwc-list":"0.24.0-canary.1de87bb7.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"a3215ff82b8bd0ba323b98cc29ed77fca57b8643","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.24.0-canary.1de87bb7.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-EBKoQ5c2n7/xWHOnt2eFlUKnTfKWUuyvN3cSTqqoa7i64VhPs9HsUOpM2nRBuFGY/b1cVCQ2AvHx0aF5z8I7qQ==","shasum":"ea74a706a4308574d710dc4e099813282bb2b946","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.24.0-canary.1de87bb7.0.tgz","fileCount":23,"unpackedSize":107781,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXtyg8a1hD8fxsftm9XANWgCJw5v+l2zXsfha3+hnUcgIhALnU7fjf27M7qgueTgpuJF9W5jZE6LdozOh8G/f18tuU"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.24.0-canary.1de87bb7.0_1631991157603_0.13565829543039998"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.f2ea80c4.0":{"name":"@material/mwc-menu","version":"0.24.0-canary.f2ea80c4.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.65125b3a6.0","@material/menu-surface":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.f2ea80c4.0","@material/mwc-list":"0.24.0-canary.f2ea80c4.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"be75dd39a03705b3cc24c5614f2c7f2be7c3c93e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.24.0-canary.f2ea80c4.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-Dxy4/DgpvYnct6VdMlfR7uTdLqaB+mhfg7hRCqSDXaRxGg0MfsZT0y7UVDPdSYq5Fee1NI5IWOce6iyPF5TqXg==","shasum":"f460e474996ccc5d607a47245f4356e605dcb088","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.24.0-canary.f2ea80c4.0.tgz","fileCount":23,"unpackedSize":107781,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBTV5LWFqPFK+OfzgEe9G+oj9NOGzaCghL6ssqFNtPNOAiBTRkmHyHTVQfbnBFyHR9sPFkTd5zXKZJad7UFBaUAJvg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.24.0-canary.f2ea80c4.0_1632160523037_0.5355233577082292"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.569d739f.0":{"name":"@material/mwc-menu","version":"0.24.0-canary.569d739f.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.65125b3a6.0","@material/menu-surface":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.569d739f.0","@material/mwc-list":"0.24.0-canary.569d739f.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"c2e841aead340c043b080dc4718873a82f109450","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.24.0-canary.569d739f.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-82JpXq7SOT52XKMcgQ6QmFELFudwvHPEjFFVFj7uNOIxgjiJucGUWQwONnjzsGMA6/gitWF0g2F5otdTij1l3A==","shasum":"d1cb1b0f96ea69775159e2e72024b092a120064b","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.24.0-canary.569d739f.0.tgz","fileCount":23,"unpackedSize":107781,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjHOXc44lOW2Hh8j3jptYdZHd+ux88ggIiKC3PEtDTvAIganwD141plscyMoVSn750ODRpFSrYy7mOPvaweFybDJM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.24.0-canary.569d739f.0_1632173063143_0.27330385269613977"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.5a434a50.0":{"name":"@material/mwc-menu","version":"0.24.0-canary.5a434a50.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.65125b3a6.0","@material/menu-surface":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.5a434a50.0","@material/mwc-list":"0.24.0-canary.5a434a50.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"7f2821932d60f65ba8b79446374be9a66f009858","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.24.0-canary.5a434a50.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-ahow+Ckx9logY3M6UkOUhQMM1Mre1KSNxkj51flVzkYlDV56trusnuSI9IrANdZKQCBDgA/jNomnCPoL38/XCQ==","shasum":"11d2414714e83f810ed379697f6976133fc17fb2","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.24.0-canary.5a434a50.0.tgz","fileCount":23,"unpackedSize":107773,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxR6Dd7Hm3/5brP9p0oZxeRr0tUM8J8SKlk4RYhhbMcAIhAOzA25cxR7OxoEXjSWWzoDy/HY4HevkKLfR81DnTnV7G"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.24.0-canary.5a434a50.0_1632189682374_0.5814260046007669"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b1c1ab52.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.b1c1ab52.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.65125b3a6.0","@material/menu-surface":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.b1c1ab52.0","@material/mwc-list":"0.26.0-canary.b1c1ab52.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"320a093b73bd45cc5fa68abda305913c26c72310","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.b1c1ab52.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-sF6+7B98aq1zLKlBUTli5yR43U7e5MMRke6GChCQ8W71n8Tw2O9jFStoKCrEdMBCtnyxJhgReu0/BXqt5xGTFw==","shasum":"efbc5e99c640e18ce166935e7cec6c0a287b5049","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.b1c1ab52.0.tgz","fileCount":23,"unpackedSize":107773,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdyabU7weFIF0ZAI2sBhmtz7GzVaAOZZ3AJcFPa/mftQIgQhqwckkdsgGJ9T8NM5/7yc/OmRTftN+eZ+Gwy0Wl8vQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.b1c1ab52.0_1632193961526_0.3315495493100242"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.1":{"name":"@material/mwc-menu","version":"0.25.1","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.65125b3a6.0","@material/menu-surface":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"^0.25.1","@material/mwc-list":"^0.25.1","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"b1c1ab5230f56f6bce405387b9c75cc7111cacc2","_id":"@material/mwc-menu@0.25.1","_nodeVersion":"16.9.1","_npmVersion":"lerna/3.22.1/node@v16.9.1+x64 (darwin)","dist":{"integrity":"sha512-aiBCqipi8p8Z0uJ5Cn1ntdDhq/mQvPQ+GoiK1ctmwhc1DvSve1aMRuwpkCxMqxH2qwK7/pSuVR2WZnwMuLA7Mw==","shasum":"aea1f1d3dc3ee8a68d7ae066d911015369654158","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.25.1.tgz","fileCount":29,"unpackedSize":114399,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGioCPAMpJfweGyQxuzouI11qnlx7gCoCJVrW5S+6jUMAiEAkOVxyX3bojzAUAwcxDs/o4qUvkseWl9yNel78ewEzRE="}]},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.25.1_1632193974382_0.6928123468383585"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ae060177.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.ae060177.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.65125b3a6.0","@material/menu-surface":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.ae060177.0","@material/mwc-list":"0.26.0-canary.ae060177.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"b919ae5340a9ffc926d328999cc5fe5704922e40","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.ae060177.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-bgv3cOVDsNKYEpnQQUnqKRTnw/pZQ6aceGtF7mxN+yTFxauIA+CqUA282fSTbqKtvbIym7lr5SU5rKrtUELw5Q==","shasum":"cb6666560f31b0f641b7cc7d3d654de2f87d60ee","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.ae060177.0.tgz","fileCount":23,"unpackedSize":107773,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCN7s81XffHsQ6QxJCQ8bjR02eADRX0AT5JpEAr3z+5GQIhAMcoCIQNnVo1DiYYDJIK8Qq4lAzdI24+bHdKvcNYsCTd"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.ae060177.0_1632235117340_0.8693256382175065"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b6fe2a12.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.b6fe2a12.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.65125b3a6.0","@material/menu-surface":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.b6fe2a12.0","@material/mwc-list":"0.26.0-canary.b6fe2a12.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"06feede8e75d655952f3a43b5c971276c26fe92e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.b6fe2a12.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-oC9vL3kYbMSpJHUCe9PTRETvoD8IFwooEO++mJOCNtspffoo3b6GkOw2G0BYMewAltiXOiHyzqK8EhUwsQV3vw==","shasum":"4c95f810e250d50a3bc4b94375c41a0ef014e07f","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.b6fe2a12.0.tgz","fileCount":23,"unpackedSize":107773,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3G+fmNLynGKNj2tq0IuLFHr18o6WqRs+BvwJyEYY0BwIhAP9/n0rdOTU5gsqmFV9O0LF58HT0XUn9wjPDJ448dHHr"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.b6fe2a12.0_1632341806890_0.6509317265433965"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.07e91417.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.07e91417.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.65125b3a6.0","@material/menu-surface":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.07e91417.0","@material/mwc-list":"0.26.0-canary.07e91417.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"9fcacc1890992ebd650dca508478ea3a276a1ebe","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.07e91417.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-zJmf4JuvRBs38IBEOrmmWxIhf4Xof1e7DOh0aTW4AGRz7RQccflnv7O9YWwHYKrg5HSc9QiAO5PU6SUSvBPHzw==","shasum":"443a79e783ee762c875984740214cc83a365bb28","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.07e91417.0.tgz","fileCount":23,"unpackedSize":107773,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAYXeOn3T5Dcfc/BWYmg++Uf3pfDgeNfl+p4FbzmtdQAIhANZHQjoX/nudzSMtd3gm7p24f3pdcoGxsk3LfDr/xqtu"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.07e91417.0_1632344778850_0.6095148336062859"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e2203ffa.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.e2203ffa.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.65125b3a6.0","@material/menu-surface":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.e2203ffa.0","@material/mwc-list":"0.26.0-canary.e2203ffa.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"dccbe3e93b2694b3336adcf33188115ced04a52e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.e2203ffa.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-pm5cTjPkqrmwCnNnXToFCMD8VZwVBtTLO0od3Kf5u55CuIZmkahEfF5EpLjP+oVfzqaoAn+Zpaw2517F9dQNCw==","shasum":"623cd6d40ec8aa4973b571e95ef625e6e85a9a57","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.e2203ffa.0.tgz","fileCount":23,"unpackedSize":107773,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWnHyhRhXs6CwpPYtb7c9CnyIJVroKmAm2UCTKqkpzHwIhAKaX5PTt44wgkPnkGmlSJDp+OCPJud3neyLzfemKF3TO"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.e2203ffa.0_1632421689074_0.1284200955740269"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.4abe237e.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.4abe237e.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.c79aa0cdd.0","@material/menu-surface":"=13.0.0-canary.c79aa0cdd.0","@material/mwc-base":"0.26.0-canary.4abe237e.0","@material/mwc-list":"0.26.0-canary.4abe237e.0","@material/shape":"=13.0.0-canary.c79aa0cdd.0","@material/theme":"=13.0.0-canary.c79aa0cdd.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.c79aa0cdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"c0c828f0240aea9472d319d4a1bb77871c960873","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.4abe237e.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-FaKY4V9CDOWRvqxBIvoaD7iVtBWK5N/SQ2ObqdY1PnC2ZWZ80enIBkWvlki71yVklgwCLWlmPusnI0Yw7TSaTQ==","shasum":"ae46b1a5bfc786207193c422e8ac0e30c2787469","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.4abe237e.0.tgz","fileCount":23,"unpackedSize":108835,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB/OooiQe5UE61EpFR2JxazoNvAhNPyLy96/qDCORZ9KAiAlt73SYa6OiL1crmUHNhWCp+0r5QmKYTwe4YK8MtY3sA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.4abe237e.0_1632504698396_0.9725986306731345"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.6278ee5d.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.6278ee5d.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.c79aa0cdd.0","@material/menu-surface":"=13.0.0-canary.c79aa0cdd.0","@material/mwc-base":"0.26.0-canary.6278ee5d.0","@material/mwc-list":"0.26.0-canary.6278ee5d.0","@material/shape":"=13.0.0-canary.c79aa0cdd.0","@material/theme":"=13.0.0-canary.c79aa0cdd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.c79aa0cdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"85137ac5f9a59dd64512524f380c65b268a2344f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.6278ee5d.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-EGeAyj+YgBraAs3qmEIpY9/p8vgp5EG1xIVMcY4IcKYccaHTBgWLGkSP2lBR1bcZS+CCmxOgABjCqDekFgIkCw==","shasum":"cbe032f05df55419a48778cc446938101c2d1f4f","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.6278ee5d.0.tgz","fileCount":23,"unpackedSize":108971,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCab1FRttuKIY0BzrMHAPeGnrUmG5z3nte6Z4eci49PuQIgPiyY38DKrUducO0UrvsW8uME5Cicg3bR+sANXSjNXJw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.6278ee5d.0_1632767511675_0.3345709138765012"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3a5d5f34.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.3a5d5f34.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=13.0.0-canary.c79aa0cdd.0","@material/menu-surface":"=13.0.0-canary.c79aa0cdd.0","@material/mwc-base":"0.26.0-canary.3a5d5f34.0","@material/mwc-list":"0.26.0-canary.3a5d5f34.0","@material/shape":"=13.0.0-canary.c79aa0cdd.0","@material/theme":"=13.0.0-canary.c79aa0cdd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=13.0.0-canary.c79aa0cdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"0708ad010478b6186d6be52d3494f33bd4d40e17","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.3a5d5f34.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-3JL2b3sYtMp57ESJIu+Ezo8OiEwkBdiglm+c2WLB7sVXYKObzWlZICVF4U346br/p2RMO9/xmhqbeAfHSUUmQA==","shasum":"bcf4e1e114705b3824a10ee7a25dbdf4035d9840","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.3a5d5f34.0.tgz","fileCount":23,"unpackedSize":108971,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAuPz7VbsEcTQ1VMPxmV/8o4eAj6SHZNUAnlWImFQJXbAiAfhpUVZv2/mvAywwDCLSucQAq4ttwW/tzqgI//hv7y/A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.3a5d5f34.0_1632782520718_0.30054459626364083"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.143ed3c8.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.143ed3c8.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=14.0.0-canary.86b50ef74.0","@material/menu-surface":"=14.0.0-canary.86b50ef74.0","@material/mwc-base":"0.26.0-canary.143ed3c8.0","@material/mwc-list":"0.26.0-canary.143ed3c8.0","@material/shape":"=14.0.0-canary.86b50ef74.0","@material/theme":"=14.0.0-canary.86b50ef74.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=14.0.0-canary.86b50ef74.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"d25beb586046dd7cd30a302cdbcf1114a66b7770","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.143ed3c8.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-THTSIGkqLTvFIxmrfAagN0qoRe4wwEfwAKMdXM88PUMKX9dSnSWGS16XLHNIaqLRgKRYUcj0AJt2d3zJkiQyog==","shasum":"cab56ae232d2c34095bdc2b1a23f9b87aad9b03f","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.143ed3c8.0.tgz","fileCount":23,"unpackedSize":108971,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFiZPe86wsHJwpT9Gn/KkLV2v3D77+9QFcTpRlINlsMfAiEA7GxITsM/N9ZiPZxD2dzwr2T9bJI4AT6ePRK8b49eBNc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.143ed3c8.0_1632880280591_0.23344577563406754"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e5923d68.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.e5923d68.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=14.0.0-canary.86b50ef74.0","@material/menu-surface":"=14.0.0-canary.86b50ef74.0","@material/mwc-base":"0.26.0-canary.e5923d68.0","@material/mwc-list":"0.26.0-canary.e5923d68.0","@material/shape":"=14.0.0-canary.86b50ef74.0","@material/theme":"=14.0.0-canary.86b50ef74.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=14.0.0-canary.86b50ef74.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"41f6e947d4028d5479ec62a20cbf1e1fce3c3a27","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.e5923d68.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-5TtKXYUfSSAQXKqpWQY7kYNcSmxnJVD3bHgxo1WxAF59jBBx8G/LZlluEC7lO5coVOuNYFs1aTIogPXGgzAe7g==","shasum":"0010d41502bed56cce83e75c69913a453c8550c0","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.e5923d68.0.tgz","fileCount":23,"unpackedSize":108971,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCLBdoGaMFv11qPdljRjJuodar1wzuPC+Ujm5cik2gCfwIgLuZMApsd7RzvTtPRKjWYqVCjwlqLhpqE10ptVsqnAF8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.e5923d68.0_1632960382582_0.3669892748452255"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d8ed5109.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.d8ed5109.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=14.0.0-canary.586e740dd.0","@material/menu-surface":"=14.0.0-canary.586e740dd.0","@material/mwc-base":"0.26.0-canary.d8ed5109.0","@material/mwc-list":"0.26.0-canary.d8ed5109.0","@material/shape":"=14.0.0-canary.586e740dd.0","@material/theme":"=14.0.0-canary.586e740dd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=14.0.0-canary.586e740dd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"7cb638711a37e4d716e9aecb64598a665d377e7c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.d8ed5109.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-YJB9C8H9RPWNyyWWVjTRVcZkkSjAE424r8cig+CziD2oYuQcP3RtAHwNyBLaCO0BoN1fvCddvN1D3wOY4V8mjw==","shasum":"3b22633979cb5cdad22414ef4abaa2061ad2c5c8","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.d8ed5109.0.tgz","fileCount":23,"unpackedSize":108971,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG1wPClF5gwZqN+dUhD9/Tf4VNg+2IkgctPL3Ksf4GD+AiEA6MnjeIZykJTGO6DB/7D8g3JxCBF2jF1Ml+pl+zIb2a8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.d8ed5109.0_1633044863294_0.8705224463701009"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0efb9c2c.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.0efb9c2c.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=14.0.0-canary.586e740dd.0","@material/menu-surface":"=14.0.0-canary.586e740dd.0","@material/mwc-base":"0.26.0-canary.0efb9c2c.0","@material/mwc-list":"0.26.0-canary.0efb9c2c.0","@material/shape":"=14.0.0-canary.586e740dd.0","@material/theme":"=14.0.0-canary.586e740dd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=14.0.0-canary.586e740dd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"878935c40ce21b0cfddbf2aab964ba07d23dbb94","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.0efb9c2c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-zimXltGOB0lu4aVKeVSTFXfwSkt0MXEsDFkos8rcCmL84TOTvfnYacaqssZi1NnxLw6c1QIjAvl8SVyJdGYOrQ==","shasum":"c039aa83339da8bc76b4a2094a7f09f9750786a7","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.0efb9c2c.0.tgz","fileCount":23,"unpackedSize":108971,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtt43INIRZUfWVWWikYfFzoHp/uwKNXR0Ju70hGdhodwIhAPW+W0XC54IXfILgsLZlMxo6RqCjk0pFuFuBqWXDoadF"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.0efb9c2c.0_1633140526992_0.700445624753681"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.1c9adcb3.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.1c9adcb3.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=14.0.0-canary.586e740dd.0","@material/menu-surface":"=14.0.0-canary.586e740dd.0","@material/mwc-base":"0.26.0-canary.1c9adcb3.0","@material/mwc-list":"0.26.0-canary.1c9adcb3.0","@material/shape":"=14.0.0-canary.586e740dd.0","@material/theme":"=14.0.0-canary.586e740dd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=14.0.0-canary.586e740dd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"432b66e41cc474278a452cfd5bd850754fd8b9f3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.1c9adcb3.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-W9jhXCz5bQ2p3UnLeGr5UBsysMBVK4wXpcYx5jJR2Kx4gYhsmoFiV5xXf9NGXSd4YpV1h0DUi4CB2AmnX/GTRA==","shasum":"ddd1862860d0f3f1fa9ca100828f379d32b06dfa","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.1c9adcb3.0.tgz","fileCount":23,"unpackedSize":108971,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDgLa70sWADdkbPnkCFli3BFyiG5cAsosJIGpmULMdTjwIgCQlGXtAFii37jKrXFJj2HtLH75Y6i2Y0eyTqTtwal4g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.1c9adcb3.0_1633368845558_0.7032723816416568"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.dfc00d60.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.dfc00d60.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=14.0.0-canary.353ca7e9f.0","@material/menu-surface":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"0.26.0-canary.dfc00d60.0","@material/mwc-list":"0.26.0-canary.dfc00d60.0","@material/shape":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.dfc00d60.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-/9habMkLYA7XhSVJaokdskixYB1sVJjq1gmNbnm0NHBM6rpHaFT4C0oAhZCtnCJP8tOeK+qoyehF/pLslSZDZw==","shasum":"01ee76eb8442dd94bf802133e063fe9acca614a1","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.dfc00d60.0.tgz","fileCount":23,"unpackedSize":108971,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDD/DhLF7pbq40Ne7wkOmLbdaceg27nYv8yKiFekdkMeQIgcEzCSehM/G1NcXSv5HQgQkSOJ6X7IHOonfJfBZd6S/w="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.dfc00d60.0_1633741068733_0.6375742414338927"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.c3aa844c.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.c3aa844c.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=14.0.0-canary.353ca7e9f.0","@material/menu-surface":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"0.26.0-canary.c3aa844c.0","@material/mwc-list":"0.26.0-canary.c3aa844c.0","@material/shape":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"a792c732afb00bf097879fdcd7a1ac2a0c5d9506","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.c3aa844c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-wO0POFx8K+7lUsN01v4S045WA2+OHNm9rPFyTq/tRAjRK58YbIJinCcd0CC7+8sl3kJgyhd01AHth3MRamyF1g==","shasum":"e89f87d4b83cad652b1b92082f662f5f7f4ef58d","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.c3aa844c.0.tgz","fileCount":23,"unpackedSize":108971,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGXstuXTkqDnpF3SGwdKLM2KKCJXD1jkUS62z2yMJ6ueAiEAk+sBrI1db+fOa1XGXsSlDddhrEJ7SGy96iZDVf1uLVM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.c3aa844c.0_1633994090221_0.9878990670676866"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.2":{"name":"@material/mwc-menu","version":"0.25.2","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=14.0.0-canary.353ca7e9f.0","@material/menu-surface":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"^0.25.2","@material/mwc-list":"^0.25.2","@material/shape":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"c3aa844c2a09ff9868820ce946f25f9df7714560","_id":"@material/mwc-menu@0.25.2","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-Cm+k5m8iDLXVBt9Suq3xtJjXWhaiyQ+byXGqxVjCK3MacmzXA1NHDe+Hbk47WTmaN5QMug9Ywl63OCz1VhqOSA==","shasum":"995ba6eeaa917a606fede9013b83b70cffd611bf","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.25.2.tgz","fileCount":23,"unpackedSize":108919,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBtvjbT4JJmUkmbezBB93zOyBasJoeIThyt/PGGeH04rAiBSRVuTlnwvc5MyhroHcBRsBZ/JzEYKFRTFHTVKju0sew=="}]},"_npmUser":{"name":"taylorv","email":"brian.t.vann@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.25.2_1633994324682_0.7540847002814512"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.406d6fe1.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.406d6fe1.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=14.0.0-canary.353ca7e9f.0","@material/menu-surface":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"0.26.0-canary.406d6fe1.0","@material/mwc-list":"0.26.0-canary.406d6fe1.0","@material/shape":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"d1410f3120b13ff08ccd731739c038b9fb14af78","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.406d6fe1.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-5zHQcqvvslbIFQAFT7LiNCYnKmZKIsYyBUlFVUQL8yT6f7zk9ns3wznRbgFoBC25b6FoGmWjB7BBykYrTkALRw==","shasum":"a3836c7e068cdbfb1bb7d94365be8c00da9ad7ee","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.406d6fe1.0.tgz","fileCount":23,"unpackedSize":108923,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGEjyR2yX6f04FmlA1Zu5Te2EYVxJ1WeyBY4SlcRM/T6AiEAzWVulp2Rns062TTu7Qys2Dzmns6lsQlqtjQlrPytraQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.406d6fe1.0_1634158796778_0.054493409567636375"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ca0a674f.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.ca0a674f.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=14.0.0-canary.353ca7e9f.0","@material/menu-surface":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"0.26.0-canary.ca0a674f.0","@material/mwc-list":"0.26.0-canary.ca0a674f.0","@material/shape":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"b8e99d19dfc1b6d5062ada3345d461e9a77f18f1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.ca0a674f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-O6jT8ESksTM06qLPFEq73sINRZFNunftN/04AJajoWwrkpzXxRq6Xc+ApTbBviN1bjj45FWWNze6cPboMfQqcA==","shasum":"09007a1db7cfe10c369cb68a68961c737a0fb3d0","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.ca0a674f.0.tgz","fileCount":23,"unpackedSize":108923,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE+MrNPxyCnCmlK81M9SIa4YzX2u0p5pR2o+s1bn84MjAiEAoc6YfLyhuL3A2cVzR6UM3hROez7hJnBIas8hUARAs7Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.ca0a674f.0_1634593048141_0.19182197519596023"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.eefcf660.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.eefcf660.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=14.0.0-canary.261f2db59.0","@material/menu-surface":"=14.0.0-canary.261f2db59.0","@material/mwc-base":"0.26.0-canary.eefcf660.0","@material/mwc-list":"0.26.0-canary.eefcf660.0","@material/shape":"=14.0.0-canary.261f2db59.0","@material/theme":"=14.0.0-canary.261f2db59.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=14.0.0-canary.261f2db59.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"70552d8e831f6542ab42f41bb5d338adcff0500e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.eefcf660.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-mHoFyc/GszYtQ0d51MgaTyvl35PVzvcQJZvQvBE0jAjw4d9+xCVtb541cmg3wQO2DWsYotvEZy+XCoBfjy9q0A==","shasum":"922a7aad87c696f2ac17a18d94f750de83a30859","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.eefcf660.0.tgz","fileCount":23,"unpackedSize":108923,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFFccosV9EvP2Ao1RERFptNMmCxkp5T1iPcgw6CdJfLEAiBM76B/9KRGw2M2TWbJxyjI2CmZ5Cc+L8tPQkTxhhIE1w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.eefcf660.0_1634765046959_0.1671229976778772"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d21acc8f.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.d21acc8f.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=14.0.0-canary.261f2db59.0","@material/menu-surface":"=14.0.0-canary.261f2db59.0","@material/mwc-base":"0.26.0-canary.d21acc8f.0","@material/mwc-list":"0.26.0-canary.d21acc8f.0","@material/shape":"=14.0.0-canary.261f2db59.0","@material/theme":"=14.0.0-canary.261f2db59.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=14.0.0-canary.261f2db59.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"13f43aef10317d911611c572ecc044445a012a2f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.d21acc8f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-ScMRB+LhikYXRDQQAixPF2LwoqzJc0RqIlDosG1LKILwH5XEnGtXP81K49AUwQ/C+Wmz92yExMvmhAJkMNbHDA==","shasum":"f467890a83fafc457b4752ff261c10c1d96bf889","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.d21acc8f.0.tgz","fileCount":23,"unpackedSize":108923,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICr8P5bXgb148RHRnD/zFWz9n3arKOJCkY1bnfPz/EIHAiBAia5TzsQ3MKzRa4d21SRgZ1f1ldFpJ/w2iarmslsqtQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.d21acc8f.0_1634769179075_0.8389337240150219"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.3":{"name":"@material/mwc-menu","version":"0.25.3","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=14.0.0-canary.261f2db59.0","@material/menu-surface":"=14.0.0-canary.261f2db59.0","@material/mwc-base":"^0.25.3","@material/mwc-list":"^0.25.3","@material/shape":"=14.0.0-canary.261f2db59.0","@material/theme":"=14.0.0-canary.261f2db59.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=14.0.0-canary.261f2db59.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"1f19804bea995fc84ab35feb67668d9874ff10f9","_id":"@material/mwc-menu@0.25.3","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-jr5R61BfqrJC0lsAI63y4BsEM2eY3n6kiCy2ZnwinmxrfFrS709T/zuSUUW/xG9b9inSku4WjjSkDhPzQrmS3g==","shasum":"f3dec5f520726715249bbe7301bfad83f7e9273d","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.25.3.tgz","fileCount":23,"unpackedSize":108871,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDxKP/q8iSDdlkfsQJoqmf5dGc2OYy9wtuhNsCW1DdUgIhANOcRG7kclMjSVEogQZ8/CseIZKG5u5vUjp8dwRO1nOi"}]},"_npmUser":{"name":"taylorv","email":"brian.t.vann@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.25.3_1634838955935_0.5410349028164505"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.60449b7b.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.60449b7b.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=14.0.0-canary.9803d2dc1.0","@material/menu-surface":"=14.0.0-canary.9803d2dc1.0","@material/mwc-base":"0.26.0-canary.60449b7b.0","@material/mwc-list":"0.26.0-canary.60449b7b.0","@material/shape":"=14.0.0-canary.9803d2dc1.0","@material/theme":"=14.0.0-canary.9803d2dc1.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=14.0.0-canary.9803d2dc1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"cb5b8ebecb046df6d10001a163b69a26954c94bf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.60449b7b.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-lDmpF/eHI7ysmOV24DHBELn41nVBlp3uxlaZWI50f7A/E9f5IhA5avrJ5L0pmZGWMUQ6sil4GqZ9Uaas3t8SDQ==","shasum":"50d0480fce6a9ba34ada3d0e4186365852755937","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.60449b7b.0.tgz","fileCount":23,"unpackedSize":108923,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHGLBREAc+1xdV0XHIWk/iDVm2BC9QPzhBvSo7ZRt0zGAiEAiHsTsfx9ClZKm/0ty68z2xiTOWBNZSnd8N/WR37pCZg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.60449b7b.0_1634840280771_0.3976100910306457"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0d8084ed.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.0d8084ed.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=14.0.0-canary.9803d2dc1.0","@material/menu-surface":"=14.0.0-canary.9803d2dc1.0","@material/mwc-base":"0.26.0-canary.0d8084ed.0","@material/mwc-list":"0.26.0-canary.0d8084ed.0","@material/shape":"=14.0.0-canary.9803d2dc1.0","@material/theme":"=14.0.0-canary.9803d2dc1.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=14.0.0-canary.9803d2dc1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"ca8c4979ee49843dba32b345040faa8c1e8a22a4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.0d8084ed.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-FxREsozq4W2AhCC8DSeqrx7r6OP6BwdVnC9Z9SUWDef77AkX5NC+0NEhXyJqbv+J8CcXdD2Eail6yo/1ShgOfg==","shasum":"e0e4dda78705281f84e366474fd4a4b6572c54b7","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.0d8084ed.0.tgz","fileCount":23,"unpackedSize":108923,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDuMPtS1g0v/7myH6/PPl0KCCigjb+3NdW8ETdcnWJBQwIhAKs5HzV8ooeLuFxZUVFSqmtKWqnkrwdCYGWdOxExjFp8"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.0d8084ed.0_1635443125838_0.7544093230050606"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.232327ee.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.232327ee.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=14.0.0-canary.a986df922.0","@material/menu-surface":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.232327ee.0","@material/mwc-list":"0.26.0-canary.232327ee.0","@material/shape":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"0645d0b4b0eac5799fc20a3bd279788eb66a7564","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.232327ee.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-PeS/vk/qyl7TAsAxR6ESEddePFbLrdCAs+SNFH9bz+UM/QHQ+zRA0FikMECkIqTrPMKe9+Sn5Yta41Ksx3Httw==","shasum":"3ac112a784f2dad538d2dcace60e34d78c332b42","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.232327ee.0.tgz","fileCount":23,"unpackedSize":108923,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7Q6GsUedzYA6QmaJZ8dfDo4ip0GiTK8rmLBy9Fw2NWQIgEDw02SQZ5EvLaGHnhFf/BMtzUM3KoOQTuoYyLmnrfak="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.232327ee.0_1635797777789_0.44841151989201533"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0a492ae8.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.0a492ae8.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=14.0.0-canary.a986df922.0","@material/menu-surface":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.0a492ae8.0","@material/mwc-list":"0.26.0-canary.0a492ae8.0","@material/shape":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"9f520a49648fd39a7140df761448008fe0fbb492","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.0a492ae8.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-RBPEIvU2FYmvcVB1DkThHM2Ud9junrGeR/WtLmYxk2mmfZTiAPLFTE+8qwVNY87oqOL6tN7DLdNIql8w62/8cw==","shasum":"119598fb096f5b5925d470f5424ff7b1d713961e","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.0a492ae8.0.tgz","fileCount":23,"unpackedSize":108923,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAdjhgaHZMH9yLx4L1vfU6gduxA0LbsHTGQK0/GAIF4hAiEAozdTdboYXyumLrNMQ5y2+fKroqzfNfKggbXpxjEOyiM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.0a492ae8.0_1635847266405_0.8832091766833161"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0aa18745.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.0aa18745.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=14.0.0-canary.a986df922.0","@material/menu-surface":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.0aa18745.0","@material/mwc-list":"0.26.0-canary.0aa18745.0","@material/shape":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"5345838b7f3a3ec41bf4ef997759be6aae3cd340","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.0aa18745.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-612ELJx9FyGjzUkrm9OYHUERfxKMdItQdQ/O+4yq32O9qR62WOCOA04WdBDgkF7zc7+nuf+w3DsKF/NfoNLIPQ==","shasum":"820f12d5999f46c415ac3a7dc962e2187610a322","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.0aa18745.0.tgz","fileCount":23,"unpackedSize":108923,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHVbxAuKjGbBmVfXAKVy5VxIqPrl2SSutaM+tsxD3ftHAiEAqaJof1nfRV+tYbyEWdyRVVnUkV9Ny9Re1kH/NjI+l/w="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.0aa18745.0_1635876502884_0.18910716997240073"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.f3e28323.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.f3e28323.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=14.0.0-canary.a986df922.0","@material/menu-surface":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.f3e28323.0","@material/mwc-list":"0.26.0-canary.f3e28323.0","@material/shape":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"ebbbec0b1b0e29da237ec87bebd889c3af847f1b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.f3e28323.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-thHEot2nzsLadySkfGnenpVDzJ3/JfFoXrvOh3w1K//tCTBtQG14XfsVXkO5R6dkqlK7PAVrPcFsw2UScKhpGA==","shasum":"a06ed35de7be199e00102ea77e2f99473d1ebd14","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.f3e28323.0.tgz","fileCount":23,"unpackedSize":108923,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCtHMdTNUmTMX6zitQDgrXvEuiG5SbvDRyT9EnRwj1CcgIhANwtK1NdV6OIm7SFZOMsICqxVHZtB3eFMJuq7n688cZr"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.f3e28323.0_1635879604680_0.9478848022761921"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.27e05c5d.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.27e05c5d.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=14.0.0-canary.a986df922.0","@material/menu-surface":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.27e05c5d.0","@material/mwc-list":"0.26.0-canary.27e05c5d.0","@material/shape":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"c052b0acfe9f929e6bae475576f23f8349bde578","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.27e05c5d.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-Jcs19WSf6PyQHaPqCcFezRcLbjBydLM82f/JEdFyEstN1bYtjUmwIoPmN588OZ0rDCsd8tq3Lxkw7hr2yvWnOg==","shasum":"f681efbf5995bfc27ea95d5af75dbff370520451","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.27e05c5d.0.tgz","fileCount":23,"unpackedSize":108923,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCR8jPMdIwF/rtbx9GkHY8V4W7LQfftvfDYc39jdIkFYwIgXpC51+Rz4Wzb+ZZK8mopVfNkI83hTaemdj8mfxoRw1w="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.27e05c5d.0_1635965130480_0.6407275948933657"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9e44af7.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.b9e44af7.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=14.0.0-canary.a986df922.0","@material/menu-surface":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.b9e44af7.0","@material/mwc-list":"0.26.0-canary.b9e44af7.0","@material/shape":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"93bbd63ef108db911df936720517c5068ef30dcb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.b9e44af7.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-Itjp3Yo9hSgoKgtfXZd2v8QKZkIHJoGj/UywiGHx2aUGt5gNkhweHfFg1i1vvk30Iwtk1r150LanH0eYhYCdbg==","shasum":"40d58b07207fb5072edde1cad42747258a3aa9e0","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.b9e44af7.0.tgz","fileCount":23,"unpackedSize":108923,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDS+DfW18HvnINaUh3f9ytJTgQoikHtmLhPGyKEee6oTwIhAIZGpzsirTzjmCGxr64s5VR1qtOOekLCVtDCEMWHbI0b"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.b9e44af7.0_1635966274725_0.6215722587771726"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.448f6cb9.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.448f6cb9.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=14.0.0-canary.a986df922.0","@material/menu-surface":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.448f6cb9.0","@material/mwc-list":"0.26.0-canary.448f6cb9.0","@material/shape":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"b9833961f155dca92373d3a6f0476bc8cef934a2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.448f6cb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-vO0GyN3w1YgPmnH4VbkACN622qSKLKuCf/ts2BK16smbTPXfiS2GRExyS6hxOxo3QQIVy20l9p086LEUhd42zA==","shasum":"7cf2697884b6682ee5f0018945b731190dd413a6","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.448f6cb9.0.tgz","fileCount":23,"unpackedSize":108923,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAd97Gh/cxV4Z1MvNXMa4+eAHfBgERerW0ncHdgxLxMxAiEA2dtxOqrunLGN0yNwtJqd6XRocBQGTtOhzW6qPOiSdcs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.448f6cb9.0_1636049306010_0.41923040055994276"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.8067ce28.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.8067ce28.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=14.0.0-canary.a986df922.0","@material/menu-surface":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.8067ce28.0","@material/mwc-list":"0.26.0-canary.8067ce28.0","@material/shape":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"a4d0d35b15bd6e7a29375f11c520886e5b9d168e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.8067ce28.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-TRMrMwK34gKb8VXynulh7xRkcobSsuXfr2aw82Tp9A2ByM7xK1oWd87iRmvrpe/AghCI0bqCpHUVSV8L2axe4g==","shasum":"f4339236f3d084bb3d0fb5366e224123c0f366eb","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.8067ce28.0.tgz","fileCount":23,"unpackedSize":108923,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFld/vMBwI5K8qIk5bAoyKEcLAoGnMZUsDMccMcEL0cQAiAgauXtxKKNt4UOOaURtsXc4sHt68Y6SHYEIJ7VUnG6DA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.8067ce28.0_1636064577463_0.43488304714920845"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.345c2bb9.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.345c2bb9.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=14.0.0-canary.43d08ba77.0","@material/menu-surface":"=14.0.0-canary.43d08ba77.0","@material/mwc-base":"0.26.0-canary.345c2bb9.0","@material/mwc-list":"0.26.0-canary.345c2bb9.0","@material/shape":"=14.0.0-canary.43d08ba77.0","@material/theme":"=14.0.0-canary.43d08ba77.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=14.0.0-canary.43d08ba77.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"3e7898316da6adc11d19b54d685e52bc4bb79733","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.345c2bb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-Xx5moVn3LBNJrwnPuIJineaMGOtYIaWhdk33okacYoH3RqEsrkBibMIKHuIjv8n/Pw2FwnG4zxHI4zPPlos61w==","shasum":"bd1161507617ad5fcb0242e76e772ba94a197723","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.345c2bb9.0.tgz","fileCount":23,"unpackedSize":108923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqP4gCRA9TVsSAnZWagAAgToP/ihgydzu2aPPJ0kqAW6I\nsw7ZfCkbzk/dpzLjNbiofbJ2I/rURln9pMmr1Y62eCCD60G+CTFm2jvESEwN\nPNsR3rhdKXOP7o1FVJJqO07z5LgsbHfl+BE9QlSExdf8a/9hSNXOjwr8SZ1d\nbEHt2puQRW0DwuS5qz+LG5vLZvVMy9G8BMXL6x9AGnmW1/DLJHE1BAGrJItB\n3DTBrs19T+Is1vaczB8YRKIv4l54MAhg4C81uwyDKAjhpL4QBcKTQ6K0g4BI\n0b2PDbLEe5iJI1Hb3Xk0KrfwktC92DqL8Q8Vg2kHyKrr60Yz8MSe1nxxzgb4\nTf3qQXWrKk7o4pctbWfL5Jo6g9XaOv9KmZOc6or2Jt6JlTbGO93EI9etJeOS\n218zTLZSB7uudAxPvtkhWdSWDN5zk9fUHl81IZZOGdaCUvow67XWJxxCf41c\n7s4VbuGd+Dn3Q//YlG12uDNVL+ir9TamxGz3A6UXTmTuKtvNPO5yImwNwz6k\nzAeX2zWaqQ8eY/JY8LrQ83yHnFIC8J6P9RrUFdT2CyG7AtmaW33ZUIFVMHX2\nJJrExn4Hxege4BVpjR/iydAMeezfbVyuflxxnuHlh04mkG27EXkoiDz5yZLu\nmpSJLApTAkhjEW523fIMTzjJtru0wL7ag9U3iKcC2B8ROvb5jQ8IrWpNOM2f\nIklP\r\n=AJIg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAjkBakZDalRz4NHIg22e2x4htuYdnLBOHA/Jca7di16AiEAjIrJW7Ewdyk0BKlobY+5B4cOw3JVd8DrcKmsDLo6xHw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.345c2bb9.0_1638465055959_0.08858103555529073"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0547aeeb.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.0547aeeb.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=14.0.0-canary.17a072535.0","@material/menu-surface":"=14.0.0-canary.17a072535.0","@material/mwc-base":"0.26.0-canary.0547aeeb.0","@material/mwc-list":"0.26.0-canary.0547aeeb.0","@material/shape":"=14.0.0-canary.17a072535.0","@material/theme":"=14.0.0-canary.17a072535.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=14.0.0-canary.17a072535.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"2115410a9593d1f2c95099961aed3e6e61255f88","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.0547aeeb.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-qg/ZijxHv5cQsjfycUlcQFrPVmx9DHrPu7cLmSauiqJNZhZebXQc+E/qyxSDmP5YxUaG0AkB0rCFHuiwH6hd4A==","shasum":"e03af1b0c9ff1a06838964f7100e100ec4fe6952","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.0547aeeb.0.tgz","fileCount":23,"unpackedSize":108923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhrjwrCRA9TVsSAnZWagAA88IP/1fSstadeo9ASOQQdHKI\nsIU7DWf/7NM9FH0NBjHWaFbHDNTBWhYD6vESMJ9qSiDMIJCBA04zzTKhIe5p\ncgJvIUQhhgdVPfqfwS8Jnx5BNAZQEDM2X03UPl4bY2m+GU2iTrMPdTPNr7vj\nhj1K3p7nxoSePKxfw1hUDzVUS0CMLmM78qrrGr6P4wuPwVvQC1hb5wk2iuFh\nzMr9NAyUeUQn2C2FHCH4uIaIF9Jp2kksiLr7ub5ct6IZQPLz+csoiMU/mmYX\nTG2HKHAqN9J/RxBrrnfdb1Sgl/CsqaZy+iJfdMRAZiDpUQ3oPGEg5vat5PlF\ndV3JGzjBUuGeGuiaKe9L4zVlousqV8drlHL7MW5as0hJ/rIKlhEktw9Dhrsf\ndyO+3GkFM31tm/4OzUOM267+aD90fxCuVhhWn1rFVDCJyozzc7UFoKek6VWO\nXJrzcOipovDaq0rj852zZRnHyMMl6aP5jCCUPT3OlYrkFk3+kPXXonRD6jv+\nTHUm/+/7KcZWUp+1IUHxOGe0pOaksNrf/szRGMY5zzZYzG5IUEAfIV75fDLv\nq1imTsA/wg01rA5oqI4kDHRLC/DxWh+iQGKG3qr58zurx/g26d77Brp65J2T\nWMectH0p94lLC7BwpEJpxLYpRs413QvzHhcb+njU46ipfJzjDt2BiGFmFPN8\njG1L\r\n=b9oL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/7ZikkIA9Kp5nA4aMsN/RmLEWef2UyidmrVDNDdq7lQIgOZFiC9m9M3kCqIVX2+/mXu2tbQhhTZQI6ker3VYxtfs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.0547aeeb.0_1638808619694_0.13578532281528366"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3b2452cc.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.3b2452cc.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=14.0.0-canary.b6510c8c1.0","@material/menu-surface":"=14.0.0-canary.b6510c8c1.0","@material/mwc-base":"0.26.0-canary.3b2452cc.0","@material/mwc-list":"0.26.0-canary.3b2452cc.0","@material/shape":"=14.0.0-canary.b6510c8c1.0","@material/theme":"=14.0.0-canary.b6510c8c1.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=14.0.0-canary.b6510c8c1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.3b2452cc.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-qxjrpQBJeXMnW2iWJjo/UWsH1EL4pI+VPaiCFX+67ZCHI5uwHYwPcU5esY17L/rylbgduFbVd0Fwt52284Xpsw==","shasum":"5fd31a38425db2eec3e6416788248e80301cba35","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.3b2452cc.0.tgz","fileCount":23,"unpackedSize":108923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsUiCCRA9TVsSAnZWagAAMkYP/jKoFGzin44WawADMkGe\ndi2k86ThJI23Tet3IJx16YumbHFi+EicwcMHBfRSoGMGcIDjFOg/wMpgvZ59\nH0A6XVAOM+SOxdyRCtDXI8d5Gc1iDDvC2XmRVbOdyzIlYoKg9Bf1ArK7n5Mw\ntkkRT32cj7iMmrtOR70Kol3kVzvkIjlDF9okeE3ushPDdwjJGdBYan7LmZF3\nVcObOiohnqoL7DEbxAPnGa3jHL0cwPW/XdT/wvsOSl/HRJHmpCVHDAORiTuS\n7GGxp8URlWIr3kmdKFkmkmraeW7UPv/CbYzSYiVtB3ZdevJqJAbT4DDtyMzh\n6kXPQ+LPIMuTr1z+YSeiVfWKW5LV30npmY8IShZKqchR2vElyYT5vtt3R47+\ne5EeIhs2SA8MwbtLnDJ2SW7Wsec+09m64r0iWYu3JF/3dXKNUBXaTm+Ossmx\nqyrhyhVlYzbhEmT7Nv/vzlNMlXNKi4RtIUB+b18D6SEV5AWgtb827+G5wZqK\nKqFWxdNgIWQk7eu/kIS9H6W+A5BmB4PwMqzS5PVjf+IxnxJ+YdkgU2QmU+TF\nblOMvEdlhy+sJ+av4EdlyotuX/Fg4k6JkCOjWTmPhQMxPTmyQ7/ucOBnsIFB\nPsf10IbiQW+hKlGwGcY+YY+wCL8QqxEz30EFehWpzn6hxej8rHYLLDeNSU6Y\nUvid\r\n=behd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGm3T47dVYmdoAgfGQEJgW/OvxWdA/U1soCW67y3zwMoAiEA9PymjKm+8xAPF6rO2RoHy8ggo4cQSBMcN18Y3boJbcA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.3b2452cc.0_1639008386566_0.3948745006715695"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.cf7ba5a9.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.cf7ba5a9.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=14.0.0-canary.f460e23da.0","@material/menu-surface":"=14.0.0-canary.f460e23da.0","@material/mwc-base":"0.26.0-canary.cf7ba5a9.0","@material/mwc-list":"0.26.0-canary.cf7ba5a9.0","@material/shape":"=14.0.0-canary.f460e23da.0","@material/theme":"=14.0.0-canary.f460e23da.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=14.0.0-canary.f460e23da.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"7e92aaee33b1c30269a52ec2c26232d0690d3d58","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.cf7ba5a9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-uRvzYWpeHGSi7gnOuNB14n+OekDRjw75oXzhMehNKByoiVOJVGdvKVEAsLf0WsVQWb/ELCyGryaZhwZ8jIt5ug==","shasum":"5736b34b8f0b4d0ce6b7bd406cc417b7a1e44a18","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.cf7ba5a9.0.tgz","fileCount":23,"unpackedSize":108923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6V+CRA9TVsSAnZWagAA7JgQAJHKJXRml3sKh82JXsfc\niru+l3oKg9U7QVjGyEsQp/S/3SkwuzmFEVZD/U22rklWw30c1lFyuuSIYF8F\nsM+Ti0syW8cG2K+nxy3tBqR3N1r2BuWtJ+HeYEmvXU6iw6B1D152ernTHEt2\nHoLS48IRr6zSc6pecx3dJtLqEbgJ/hBLFpR5gI4ECPyV0jFC26uSqcomTkle\ndbsxy+EhpQRccapAzIIp3HxrqXjdyUucFYEZ5/josZyZJ8y61PZ8ZOE2YOXa\nm+xJj+ltjY47fwGVUs47+GymSvyHqmFzVxRMSYT6OmKfrenOctzJT8p8LmKu\nzRuq8vu/BEuTOY+h8iCQoRelwQgP4ppGkCvqEQft99jqLJiNUOmmFYli0Blq\ncwMxW9hcrUtsqkW1SSgZyljMP9afnsywAWikwm1CzOcUeQ4CqZFYETrLCNtA\nxRoGRdMyPyCuNzf3MkLlPpCZXESyMwLbFUivOGIUJ6xz+Ey/On7y3Zbpk24R\nBeK85V29u12X2a5Lv6rRgq1yv4SBst17gdHxT9b//6Wx+wu/kDFqzThF9Ms1\n/n8nAgjsrik090UJUFKJzXyUGPdbiDsIPybhYSN/zEEF+WsmdPWrLaCJF19M\n5PWhi1ca0XBnUhH4FpVFtfk92h+8MTn9cU3qd8GX034Zz+Gw4TrCagjMmri8\neHES\r\n=Otul\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFJLU7bPCmqmw4Um8dZ20k3tXTs9v8eBnz8GuFcwSub7AiEAuh6A3x5yIYdAuYKE8Mw7yHt1Rqme01YEAezXHRuOmzs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.cf7ba5a9.0_1639163262024_0.4404053111985635"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e1bcf14e.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.e1bcf14e.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=14.0.0-canary.3366a71d7.0","@material/menu-surface":"=14.0.0-canary.3366a71d7.0","@material/mwc-base":"0.26.0-canary.e1bcf14e.0","@material/mwc-list":"0.26.0-canary.e1bcf14e.0","@material/shape":"=14.0.0-canary.3366a71d7.0","@material/theme":"=14.0.0-canary.3366a71d7.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=14.0.0-canary.3366a71d7.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"3cb6bc85426db9ac617c732735c808fd66cd1572","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.e1bcf14e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-9Jc2f3wwldbSOa4tzxrCKMCdDbcdiGmcazhbF5/osNmunziNPJ9nmPEipkuroAqMd1Gt0SNOKbyl/OUUVTAvJw==","shasum":"d9059558bc5eee11af756967c80d62399fffbc21","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.e1bcf14e.0.tgz","fileCount":23,"unpackedSize":108923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhy3ebCRA9TVsSAnZWagAAySYP/29Nu8Y2jxF3e/rdH1IA\n9vOrbyGZJb1cym/yDnTJAdgbDQB6/v5abplkh3wB5OqxHShHd+J3h5tJ2URR\nNzQtfMHOALVtgOIGluKWVsL9TERRD4MuH1n+rNCZqyQSpVZkaxGlgNFjK3WR\nfPnQhKKi66KqZRfDMtD4U6vtItiDbkFhozf4wmiDMeGegKige3UeVnxTsK2N\n3ZFGquOWS/vCn0GolzXhll6RUj1b6Tj3CuKY5wE2ZeCRCKtg9EyMGCmoIsd6\nKOfBz+Gxzff8qrdqDW4vZda3+yyE4IfPh4fm8zrjPle6MmRPRIzzi9xkm0ru\n2Z4wL/tAaPu0RvxV3WkNsDmlaCPC6hz2Io/VE4uYkWStFXtutYl2OibjTy/a\nGsW4sl9SwzVShUPqjumIdEFPCy6MHup26UwKG23YzvTLYEUND4YvV8YTrfch\nUNuCMHDPM1hjaHSepiGAKnkSj/SSAhpwn72J9oSDSNtJovXaePlC+tvp+EpZ\nf4fyxWOPOkfK7i0M0fiIx8QQG+i/d88dFyMUBvTXKc3Eudg86RpwCigBfJ9t\nYdLLNp0yB/ga5Orc4ejiI62zfO7gc9MFjtRVez0rO1QYp3e4AxAt8nRYj5pD\n2pPvlAG/N+i/MC0odCaSxENTnAqxPd06WliGOZWrO6iF1aVWm22GwJuxsu4h\nmE7Y\r\n=L2w7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6aFdJ4o5p6otq/5iwg2fCMyoKK5MBxKMrsFaBDhSE5gIgI5V2qQJ0YyT26ZJDEJdK0qRaKdQGqHjibMwflUh0kWc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.e1bcf14e.0_1640724379803_0.72941780263801"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9d35b69.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.b9d35b69.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=14.0.0-canary.c047f7c19.0","@material/menu-surface":"=14.0.0-canary.c047f7c19.0","@material/mwc-base":"0.26.0-canary.b9d35b69.0","@material/mwc-list":"0.26.0-canary.b9d35b69.0","@material/shape":"=14.0.0-canary.c047f7c19.0","@material/theme":"=14.0.0-canary.c047f7c19.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=14.0.0-canary.c047f7c19.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"8ee41fe865471367787d08d3f94d1800c5712d3b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.b9d35b69.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-jSVSEmFa3LNC/dnLTAyD5Q1ZO1CBB46eCmLXs3N+SQ/f3VCbse2MbJulymF2KuWQ2zbC0jPuoU1rhUDA2oaKMQ==","shasum":"b3604c33bdcc42afca5d774a828413843b4c82fd","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.b9d35b69.0.tgz","fileCount":23,"unpackedSize":108923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1eMtCRA9TVsSAnZWagAAkpIP/096Fao0kIvMC2zYxF5O\nolOEzmyRfuUBQmGt705BIsgwOdn+/wOC942J8yY7545p1Zzan41/J+FwXH2p\n/AgNMWo/7JFSmyD3hAWnEHKw3OpXP2csoe/+acgy4voB3Jl3bgWT956C3d1c\n9l4aa/bNjf4cpoXm0khl1kQfRgQpDPOaSkEZcmeNCuZzb3/ThasemrDLDstF\nMvgDqoburb8DUv6rBZ+ZKvsMCo/zkYF+BmjNd+cQKxMWgQI0lohSFYzgrfCf\n6hATxlz/MtyCxlWrU+XDY2dL/NoeE96gcDVVEMrgX/Im9hEa3ddvytf6Hemm\nBA8MxIkQVnthppGowpUuQXfnwvROz0sHonZ4Naa/2Wek1o6HOjj0a9H7JD7P\nOn3RttMKhkmF/EYiNd1Wj9sXV+2y8pQohZ+wlMsxgiYLJToGNmjrUAmaYH/X\nmN6BS00PSRB6sRXznt9Oft2DlcHxLGe3whSA6kbKENj2Ofof8fdIog4KDsr0\npkZoxCJ94oWc5UgU+uxE5MUzz/sP8v0KCgjn45sHa0Vyl+RTHfiZ+jC5gZJZ\nbWxc+emZpV6TtPmYOwAvJ8yoXTN6VKVcGQgoFduRtKraF4uMlTMpCxjpXOt8\nP2zVl+uUPz1LSUc8wiuinx/60bUKvjHXfxIhn7Q4TJicinizJDZmE8W/L5vp\nZeOr\r\n=9M9k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDJw/H+gYPwwMZ3ulaEusO3uUDw65D7irCf3iZoxxn0yAiBuqcFUnPq7y7aZAGEORIByKj37kMWXx/kzbzxJrCizPw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.b9d35b69.0_1641407277393_0.0911233556798472"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.2afff08e.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.2afff08e.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=14.0.0-canary.05db65ec0.0","@material/menu-surface":"=14.0.0-canary.05db65ec0.0","@material/mwc-base":"0.26.0-canary.2afff08e.0","@material/mwc-list":"0.26.0-canary.2afff08e.0","@material/shape":"=14.0.0-canary.05db65ec0.0","@material/theme":"=14.0.0-canary.05db65ec0.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=14.0.0-canary.05db65ec0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"9bada09943cf93e3b0b697ef81fb87cc7b781379","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.2afff08e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-z33ztXG+sRpOEw/Acj6lyTSAXY1EfW5hMX2HXVkDJLsMlr2+/4/+MNvsfUkyiRoD1tKIj7wyXunzA/C8XmtnMA==","shasum":"db43a235ae3867a6f03479b117c265838a7e6dcd","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.2afff08e.0.tgz","fileCount":23,"unpackedSize":108923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh12vrCRA9TVsSAnZWagAA6KoQAISzk+naKCYePAO91i5C\nvsDOeT/EDmAll9rg0dPLy+F9IXuPUoy6IklTjdlYZQldSyHQlEETZ+MYWw05\nWrRIqfWrtczNneWpKeevbcswni7+8X7jmTQI+tN5GqWGYiOXagf5GhGDw9tj\nHB0+TWfwOOp+P3/n7uctSl6xo6ZcMR4OX4jq7OcQi+ev5czxD2TcsBUQ+Ynj\nN3buDuUgIyH6IZww+WwqS6yMOwStaff8EFaWclI0dGEohKSpuwpq1SWOj0ag\nYcwdoUk0ULyuiPE7kHH7WN0+WcJQfKLAmYXD7jb4WT2Og731IXgaxmP/BujZ\nPesmIJUK7HeKJVDaIxBNfCwO4DiuZWWxo7Vb6o8bWbl7E3OeRWkOAmUKdXFH\nLszEX8clSJGxf1GVzuCD2R9I0lD5qW5Ffw657SiH7xXxKy4xZAfLkVpBkL+z\nd5Fb1UCcCSmZhwdpmsloRpque7EOb4+eWrra5qWaUuaFa+Oxqiy/tb4Usz0B\nUV4jFoL1zvthhBNvZ15gI4mtZVlvypMyNv/ukZwBw6MThufV/no3XiTbpAZM\n1B4gw0rDRxYYJry3iTMTjR6fPhS5oUF2ay0o+fTW8/WTs1Mdec4l3KZaIopJ\n3mUFNx17R/SMYXmM5GqzzM6A1VsYFwt5CLywii4eydXKyXUuttrdgAdPisaw\ngYA3\r\n=l2kh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDuiFiefO5EvnkCcOyEzPuJUVpvKGRpDPH/Bh/uat9BnAIgIZff9QhG7XtevFToPzlaqX+f3m567Nb8BpE7/Mrdvf4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.2afff08e.0_1641507818968_0.3322334301075789"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.893fc857.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.893fc857.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=14.0.0-canary.6ca8b8f85.0","@material/menu-surface":"=14.0.0-canary.6ca8b8f85.0","@material/mwc-base":"0.26.0-canary.893fc857.0","@material/mwc-list":"0.26.0-canary.893fc857.0","@material/shape":"=14.0.0-canary.6ca8b8f85.0","@material/theme":"=14.0.0-canary.6ca8b8f85.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=14.0.0-canary.6ca8b8f85.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"6cbd6b098ea6e47fddfd2a5875df6d41262b532d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.893fc857.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-MXG/UuZe1mtoNkCrS37C3uStbp0SW31htAleKT97jmMmYlqOn+en0oDRAhqRanUL5+DXeP3K3toawg2JCu1PBg==","shasum":"4adb1e9ace722347fc1009502e87b669eb26833a","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.893fc857.0.tgz","fileCount":23,"unpackedSize":108923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2IxvCRA9TVsSAnZWagAAoxsP/RNIH7MJAgtIeD/vPeaG\nVvhJ4RIm7+yEjuoNJ+2/JvM+L1WOm5IHnAfPSM28sd1WAswBj5Fh2xiSqA4B\nglT2l2UFhsuBkaJb1NOog8HnfnB7b5g5KVMva5AeairpbcAO0yC6b32WqKF4\nwHNpLuJpd1uvvHPIJj9KG/QxVfKSQZ8wqtWNeU2JQbBDHzEOsv+Pmjr1hKAq\nXi4YbV0Xiti4BXRwn6jYKV9Zgs7+ZDt1YXHe/Iocj/r/gpR0BIAd2kN1oWaD\n6OSYnK41jXKQx0YR1nPTiwmbQYLmtJIy4IJZqN4w/pi4me9lL8JbgXT58A9a\n8V2zzvU88mbz8v6CixNVDN1XlJsJOokY7haHpdLeHVl94YnI0ZYST4JmvltQ\nOvxiJ5rfAf5M86nGqNHpoKM2WZxAWMYuy+rIILBn/enPeQLkA8iZeCWUMMWY\nLYqSQ6jwrWEK6oXYYDCqAhgfP9tKPME37PamynDnyAceo64aJ7w9M/0mjyVB\nRB3lfGcfU9kL9KjcUz1t2cohU5bIzNhZ4Vnat5Hvd6mibyeRKpzm8LlppGE4\nooyqrLwJAIfnTTO2rbEp/v2tbHjE8ovXNkQFhl4B3TV9Y99LwogFK+gFjIfJ\nD9j9ZFvpM3+7+RHeVuIKvfKRDHe0f1nJIlxl4zgePc/7EI6ih9EygluhXntC\n71T2\r\n=5WQU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE93Jx5Uec8urlvL/0RZIXUwBIerGYGaxJUzw0teCl/lAiEAmcc9Mkkj2gMi34qI61LY3++oKT9JLr+ZZp8JztzicHs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.893fc857.0_1641581679291_0.5716450302938001"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.69ba13b7.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.69ba13b7.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=14.0.0-canary.c14e977ee.0","@material/menu-surface":"=14.0.0-canary.c14e977ee.0","@material/mwc-base":"0.26.0-canary.69ba13b7.0","@material/mwc-list":"0.26.0-canary.69ba13b7.0","@material/shape":"=14.0.0-canary.c14e977ee.0","@material/theme":"=14.0.0-canary.c14e977ee.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=14.0.0-canary.c14e977ee.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"776b813e379c8d90abf2a0ded57168c12f62adff","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.69ba13b7.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-JFfjzhAyo32WGfrbtfa5uUZ6UuuOFCADRDjwEwIDSkgg/nJjqVWTWBc4I7LBHE3GxvjFa2wqk7kWmFp5OcYwjA==","shasum":"0fb0b18534c8211e17667192529fc9f18b1b16d2","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.69ba13b7.0.tgz","fileCount":23,"unpackedSize":108923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6I+iCRA9TVsSAnZWagAA7e0P/3708A4nrU52HhpkgSRR\nJuaBsL40ZsbyLi24rulFqthO4FgjAWym60rSKYxROzbvoGEn7KYpbgqyE7sj\nT3/iEOku/FUeu8EejbaQTgbCc7JKYTEG0TQSaiVPrmcoiUosLRwI6RjHLCWY\n7DJf1ZSxb+3Xz+n+oF1veQ1BbMjpe6hAiPcmq8dxP5RLpnK8Heh8Wkwb79iY\nsRWbQY8Z64/NXBxiq9aKGGbzPZjOk9asiUUZscvYcTjBJ6Q9/zyhwQGQvBDe\nDQVDct0GUjnNkP+bDLvKLKbAxFCtqIU5Jw6wEN5heyIqbYgT5dgxjasmd/+x\nE2xlwXe8A/2yXQcyEuTB6EHdunegNHtnVPYh1K2r2aMV2JHpyOVMWOupiTNQ\nIfjPDhAapXUmIYLkV7OEj9eDlAVgxc/jfXME8JDvi0Qf4cYYe6Eau4m5WLlX\npfzaQBlBXkG33fb4Ytd9mcJm1C78yR/Lpb7najy6qOG2+uv2HPN1WgoQVfkB\nAZ7ffhCRMV30mILg3jDFXMWlWaR9L6VVY6qrcmG1GkuxdMe0338w7U49aZTO\nYuHs1H+zFJpJiK5mZCFT0Fl02Sk7FioIqRGr0Y84lCxlrrPcy/uLiBHCNW7M\n5FmX0ArS2eOPyNHzu9l29qTVT/10winjLB7p4++OHZuXjp2U9nYnWSkuw7Rm\nTkI8\r\n=XOhE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDAxjt1O0T17Z/w+giARQRZSFUkKt6zOEk+9JwtpPvrAIhAL2G6qd320wt4GdJQOm/plysDGIzrd5anoFUdXsCBgYt"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.69ba13b7.0_1642631074641_0.9601802653518485"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0af8ade5.0":{"name":"@material/mwc-menu","version":"0.26.0-canary.0af8ade5.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=14.0.0-canary.c14e977ee.0","@material/menu-surface":"=14.0.0-canary.c14e977ee.0","@material/mwc-base":"0.26.0-canary.0af8ade5.0","@material/mwc-list":"0.26.0-canary.0af8ade5.0","@material/shape":"=14.0.0-canary.c14e977ee.0","@material/theme":"=14.0.0-canary.c14e977ee.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/shape":"=14.0.0-canary.c14e977ee.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"64bb121cb77aee6a854395ad838fce32a6051337","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","_id":"@material/mwc-menu@0.26.0-canary.0af8ade5.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-fnPRPCbfZmU2SD4NzNCoCDnLue4X5uxlT2Z+c9hd51wXE0gDq1YBw8qCTNRZEqhQds8eLyVjFgD6OQDkaZIMOg==","shasum":"52ead6156b6547479838b90b3c126c6109282b83","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0-canary.0af8ade5.0.tgz","fileCount":23,"unpackedSize":108923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAZfCCRA9TVsSAnZWagAAn6sP/2PBV+7yfeVG/dSrAQ5A\nXlPLZwL0aRUhmEmaV6riiwxWjUgm8fspxNJFXf3Uf0viHtBrDa5EHVB2nyaU\nL/2B4YJORjC4drkHTEYW0VQbGWBlbJL/m14VZydVu4juxKnUFIEEppOflYWe\n+YZW7WwR5DstizXlWILor4RApz3KszNCv5wlQi4WNMZMAssj7Z9w6poPXjFq\nBS0Q7YghFuVPygnU7qFE83OW8I9qj7seW+lRDNzEIhlZH/NbgpB6wbiUWzwp\nhJQsJ/9Lb1wIIwcCjSreDsLdRB9FV+qUIV5LN+jyLAOGQq5Ve/y5az1sVrMq\n8Xny24OPrMUKizwIK9ch1ilwOJWNkZ9ceX8uvRgIQF26uJCUDaSpwGQxr/U9\nWUbr2XAPmgwlVXEm3kMrst0ltd9FoQ9ozbgWxNp2AR5VwT8Y75KEH24rbwtd\n5gUm4x6IkI6PlVcV7/f1ORKF2bwb1WhUFfx2Mb2mcHLqhvGKhr7G9dZIq+iJ\nwHfdHrAc9D/2VnRbR9/flY8sHH1bNb59riM5GOmkvEcRhmiPWR6R53m9e2+B\naFJp01l805GCCxojfEzmzsAdb0OxKsapKtAT5GLxlNgQN+Bx9oLsZJuAVVf2\n6jI9DbOdvdb64yfLkAwgPw0YvZCQccA7e8wjfA5hpY/SbWzas3dXl603XM5z\n9gly\r\n=O0tY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBjJgWAukCIKZCiRAfRZdadjebJO+cebzKW5pwRcUnmxAiA4F+BELqPSpn/0VTQVCvFwonCkDW0xPea04yUQLv25NA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0-canary.0af8ade5.0_1644271553957_0.18233033640919283"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0":{"name":"@material/mwc-menu","version":"0.26.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=14.0.0","@material/menu-surface":"=14.0.0","@material/mwc-base":"^0.26.0","@material/mwc-list":"^0.26.0","@material/shape":"=14.0.0","@material/theme":"=14.0.0","lit":"^2.0.0","tslib":"^2.0.1"},"repository":{"type":"git","url":"git+https://github.com/material-components/material-web.git","directory":"packages/menu"},"devDependencies":{"@material/shape":"=14.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"056b3ceffbe2fe3408dbdbb319932da85637e779","bugs":{"url":"https://github.com/material-components/material-web/issues"},"homepage":"https://github.com/material-components/material-web#readme","_id":"@material/mwc-menu@0.26.0","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-htIDFW5IiX25rmncAOGHu4LmPJwbbU/6cM4/VBUY5CMSY7uvFMOxswG9p+l+FRpgPNiO4YjIZSXFsGY3uavlZA==","shasum":"3c653b8cdad1540bb8a6f61ba53e6f52251c7e2d","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.0.tgz","fileCount":23,"unpackedSize":109526,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDiOQznNStWUU1ZAEPkq1ZtHRkrIBBR1cETZcMnPEcyIQIgUn6uV4HBsgHt1tOLeODSSnCrFrRoKDMAxluWJbkUhe8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicWbGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpgJg//ckvQrcywIgVo3KHwxcWS2JxCUq0xiR+Dn+BFtEkKFAMetkjX\r\nscSo7yAl2UQWAwPrFFHtZIjUghowZDH8/ovlzUuMjEXtTonc1YqBN+71sNeK\r\nz6Y+ES2dz4tHi82FIjhkJo1q1A8vcaibtvZ4f8tyA8MdaaWfTQk8padOU0Eh\r\nHu2SoPhf8iPscCfxjaVP4hrP9LznvbAHCZc2lJghrfS9ZNKqNoKNCIdruCis\r\nYKHpTVknBfLSKikL/P8Go0IfG8xbyiENoYiXSjIqnPbyKCCgjSn0lrjrBM+9\r\npDWVjVLW7UbQgo5TlL57qkl27ZYTLQB8Z9+PWS0DjX4c36qjbd0PEiXlulgc\r\nNr4/Giyusz3Yc99rcC37Q3aQ7Q0K8dUZRoMGWNSzoR0safCPFtR5JzBNHWdt\r\njO4pZrJelvrUk7ydYc+bL7Ta4wP1VacWlOFx3D59G6b8zN5TQFLrBF3lK+/V\r\n8c26oUY+DP4FzriBFXk84IH1R8KU9ja4aHcsdRJ0fO1nxf5dOEnwG71DZR+i\r\n1qYL5XdYkMkEdEfe4goa0eGYd1V2BE+JlbgBU9wuEWzKv+qbWa9/gsIvTIV2\r\nQWcOJQCzgOm/2twu41L8/na/qg+YJk0ZiOmNwO0LowYfprGroGmxcNieDQd7\r\nTnse5FvVXCfmYWR6OEtyPBBCDWO7FfbVE+w=\r\n=Hw4F\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.0_1651599046180_0.3079364861580147"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.1":{"name":"@material/mwc-menu","version":"0.26.1","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=14.0.0-canary.53b3cad2f.0","@material/menu-surface":"=14.0.0-canary.53b3cad2f.0","@material/mwc-base":"^0.26.1","@material/mwc-list":"^0.26.1","@material/shape":"=14.0.0-canary.53b3cad2f.0","@material/theme":"=14.0.0-canary.53b3cad2f.0","lit":"^2.0.0","tslib":"^2.0.1"},"repository":{"type":"git","url":"git+https://github.com/material-components/material-web.git","directory":"packages/menu"},"devDependencies":{"@material/shape":"=14.0.0-canary.53b3cad2f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"06b516b7f91867acd0cbe5676767aea8f490cbee","bugs":{"url":"https://github.com/material-components/material-web/issues"},"homepage":"https://github.com/material-components/material-web#readme","_id":"@material/mwc-menu@0.26.1","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-zdLalm1vabFU2+ml53B7N88OoJo+yygXGra94GluCPLCRBV6Oswdou7b8cqEyVEJ6McbeiegKwO0j8k3mEd4zw==","shasum":"16662e9826255913dbcb32ccf136f0239f3dda01","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.26.1.tgz","fileCount":23,"unpackedSize":109942,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXFpMpfQ7bit0WaM92CTIO+tII6/KpfP81US1ZXq0gHgIgDwh7imMAksUagPYS2jvCEdmllOYL2K5lbvrdfKZgMNo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieXpFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoEAA/8DV2wS56ZjPFeEp4DxZx6BO1ZTdxnjL0AF9dCfESbHzK7VcyD\r\nNdlVpVYj5eCX3G2YOktrcimd+/AzHmOSvloWo8E235YOql3gdhk/tXU+vlz7\r\n3OAfnMpYrhJb/a9JgjijWtDgdz893nSQg4+dGr4atc3dl0oWrXkz7Pd3RBwY\r\nRU9OoQsWliCc86PeDMBWeQbXMlP3KMp9K0fK+tD4RosEtZY21DE/wb2BTBKh\r\nrQ8j+3BJSjuAFJAVLY6qUWtneHjxvwISI8FbWr9JajNnOMYKo95TDtDHQZUo\r\nS3w5qPbvRO4ozOAcsMbFHO2VZ1C2rK4X9QYR8JkvK5Wjfkf4cIC/8L6MtCa5\r\n1atEOuSNEyzrOX/b3jHBgdCj8dfQTBRKs0Z24P1tEaudQGEmDox6B6qZTWGB\r\nVzc6pAa11xzR9Po3Ub9qjs61AN9oIaQfw48ef/m5rEhluiaPLJ+lwGzZ9zmc\r\nScD+nUw4gX/AemQeO7z8GgrR5+U7ZrHeJ+VNDuBdtij0prdIs4eiKsa5MfyZ\r\nyCvBR3BYkpYuBAqk/sH+kZSPN8gastZN+g4WJBjOXa+nqku9vnJv+q5Gu/D7\r\nleV7JCX+rxzgplCYrDsjChBnnNfWOc1NdodNpa/6BrcIY1UHpDSCZ/IhIwwx\r\nGQ2O0WCNvznTovRzaPFasqtTYP8jMHCYpy4=\r\n=vtM6\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.26.1_1652128325453_0.611976143734047"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.27.0":{"name":"@material/mwc-menu","version":"0.27.0","description":"Material Design menu web component","keywords":["material design","web components","menu"],"main":"mwc-menu.js","module":"mwc-menu.js","license":"Apache-2.0","dependencies":{"@material/menu":"=14.0.0-canary.53b3cad2f.0","@material/menu-surface":"=14.0.0-canary.53b3cad2f.0","@material/mwc-base":"^0.27.0","@material/mwc-list":"^0.27.0","@material/shape":"=14.0.0-canary.53b3cad2f.0","@material/theme":"=14.0.0-canary.53b3cad2f.0","lit":"^2.0.0","tslib":"^2.0.1"},"repository":{"type":"git","url":"git+https://github.com/material-components/material-web.git","directory":"packages/menu"},"devDependencies":{"@material/shape":"=14.0.0-canary.53b3cad2f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-menu.scss mwc-menu-surface.scss"},"publishConfig":{"access":"public"},"gitHead":"c1e876a15bc028034781984538ea803ba67dbed3","bugs":{"url":"https://github.com/material-components/material-web/issues"},"homepage":"https://github.com/material-components/material-web#readme","_id":"@material/mwc-menu@0.27.0","_nodeVersion":"18.6.0","_npmVersion":"lerna/3.22.1/node@v18.6.0+arm64 (darwin)","dist":{"integrity":"sha512-K+L/t267ZGrlhjK/iSKUVZQKRMkWELArKVglfS5of93ALP4in0RGnj1sOG2u3IFI2F/mEZxRi+wr7HgNxpe0wA==","shasum":"db81ee42d702690b38051767a63c366963ab8f2d","tarball":"https://registry.npmjs.org/@material/mwc-menu/-/mwc-menu-0.27.0.tgz","fileCount":23,"unpackedSize":113446,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUsPbHoZ0oHlOh3UzyROWN/hHhW1dyN/+u3AXnpryoGgIgS/tI2fMpgzgT0ZtX6J9nuG80XeZl/H4s4AD9l3SVS5k="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9qYWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwXw/+JGOGxGnORLOdMAWJ6ErA+d0w3ciS98Z46unPAaKLrjQS1ldK\r\naa8n1EWUWwE0Y533PHE+fbzsbry7GiA6TLihgkNlTEdRosAQN/OsiydojYMP\r\ncakrEQJ6UPh1WpQjsoOb7fEAUfwLtdGSIz5D1DiFIwbgx9n7MMtwAt/UgA21\r\nh9S+CmRPucoJafq3TfCGPQX6aUx3mldjll2KjfuYzJtvDCluVujM6mb4dO+g\r\nrPypgzLac4JqK4OvKH23WNlpoviSA18HPYfA8wQrt3SMWZDrjb2K3fWdf8UH\r\nkmXT0ngmJk5Nw3ukNHy5FJz68C7q3f2gxt/jMA1JM2Rz/+/hvlD1jk9Yf2Od\r\ngxI1kbJssM/w+LQjF+Yq8yJ0DNC0urMJPZkcHNJpZLXJyG9GL6CEcQ81sOT/\r\nSraMH4dvtgh5xmhmB+NTTjZZrvJJgnH/pYfg59xyM5yPSrqILN+4rjAnrWw5\r\nEg8S80egApSbhG3RSkzT7WOkAbq+50ykmOmVvdJO/79CHpj3pIDf8u1zdr8u\r\nphtdWdRY7UBm9OyoXS13J2tNbXm+3y8feGs2iPDRVFqB759uCdg1c6Gp95PN\r\nvGn1ZfEWN5irtzukm4o2Q/2Kl7bUN/5P++8dlXvnFk1MW1XFUVhuNcMNFd7f\r\ndthNQgogEBTkQgBGm5JlxW9LnGNVTABjoRM=\r\n=08xD\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-menu_0.27.0_1660331541872_0.050233945052649"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"}},"time":{"created":"2020-02-04T04:46:49.157Z","0.13.0":"2020-02-04T04:46:49.543Z","modified":"2024-04-04T18:52:17.731Z","0.14.0-canary.f790f713.0":"2020-02-28T02:28:49.473Z","0.14.0-canary.c759cfbc.0":"2020-02-29T00:05:24.177Z","0.14.0-canary.97ef53d8.0":"2020-02-29T00:18:45.569Z","0.14.0-canary.24f5fa6e.0":"2020-02-29T01:09:11.609Z","0.14.0-canary.960e214f.0":"2020-02-29T03:09:32.031Z","0.14.0-canary.a2f046f5.0":"2020-03-03T00:57:10.661Z","0.14.0-canary.024f371a.0":"2020-03-03T01:29:24.423Z","0.14.0-canary.2f164110.0":"2020-03-03T21:34:13.198Z","0.14.0-canary.edd465cd.0":"2020-03-04T00:11:10.688Z","0.14.0-canary.2b02d017.0":"2020-03-04T20:19:40.638Z","0.14.0-canary.cbdfe453.0":"2020-03-04T21:45:03.463Z","0.14.0-canary.02aa8a98.0":"2020-03-06T22:53:51.103Z","0.14.0-canary.7cd5aad6.0":"2020-03-09T23:20:41.565Z","0.14.0-canary.3a79dfa6.0":"2020-03-10T02:56:42.556Z","0.14.0-canary.22e0f5c9.0":"2020-03-10T03:00:43.377Z","0.14.0-canary.f23a1d1b.0":"2020-03-10T20:57:00.290Z","0.14.0-canary.34b2d69a.0":"2020-03-10T21:15:13.289Z","0.14.0-canary.dc04abe1.0":"2020-03-10T22:02:46.871Z","0.14.0-canary.04ccbc88.0":"2020-03-11T00:35:19.316Z","0.14.0-canary.55338c25.0":"2020-03-11T06:31:58.407Z","0.14.0-canary.b7e388f3.0":"2020-03-11T20:20:11.487Z","0.14.0-canary.b3211481.0":"2020-03-11T20:24:24.430Z","0.14.0-canary.0b5c7f23.0":"2020-03-11T21:54:18.328Z","0.14.0-canary.6c0f0b27.0":"2020-03-12T21:17:40.487Z","0.14.0-canary.b6c53425.0":"2020-03-13T16:55:45.402Z","0.14.0-canary.306cabed.0":"2020-03-17T21:18:08.668Z","0.14.0-canary.4e250cbc.0":"2020-03-17T21:24:17.561Z","0.14.0-canary.ff82d9ec.0":"2020-03-18T18:20:25.110Z","0.14.0-canary.f50f48ef.0":"2020-03-19T18:55:50.138Z","0.14.0-canary.134cf877.0":"2020-03-19T20:39:47.819Z","0.14.0":"2020-03-19T21:28:54.999Z","0.15.0-canary.2c1a4913.0":"2020-03-19T23:01:17.894Z","0.15.0-canary.3a6e481a.0":"2020-03-20T18:13:40.649Z","0.15.0-canary.603d6eb3.0":"2020-03-20T21:36:19.392Z","0.15.0-canary.05c6a93c.0":"2020-03-23T16:36:56.150Z","0.14.1":"2020-03-23T17:57:46.595Z","0.15.0-canary.4e6be3f4.0":"2020-03-24T20:59:16.465Z","0.15.0-canary.c29a683d.0":"2020-03-24T21:17:01.130Z","0.15.0-canary.fca3dd9d.0":"2020-03-24T23:43:32.772Z","0.15.0-canary.1e73da49.0":"2020-03-25T21:30:23.982Z","0.15.0-canary.bb6dfc5a.0":"2020-03-27T01:23:32.296Z","0.15.0-canary.1884603d.0":"2020-03-27T19:56:00.438Z","0.15.0-canary.aff73cab.0":"2020-03-27T21:14:41.367Z","0.15.0-canary.63168f61.0":"2020-03-31T18:12:52.463Z","0.15.0-canary.9fb79b3e.0":"2020-03-31T21:20:43.557Z","0.15.0-canary.9bd3e9e2.0":"2020-04-01T00:16:36.718Z","0.15.0-canary.072084ab.0":"2020-04-01T18:40:21.096Z","0.15.0-canary.4dec04af.0":"2020-04-03T20:30:13.836Z","0.15.0-canary.9b676354.0":"2020-04-03T20:30:32.882Z","0.15.0-canary.6b946095.0":"2020-04-03T21:24:35.695Z","0.15.0-canary.5ccbfaa2.0":"2020-04-03T21:30:15.968Z","0.15.0-canary.a0ab8772.0":"2020-04-07T20:09:17.175Z","0.15.0-canary.8d352305.0":"2020-04-07T21:42:32.018Z","0.15.0-canary.31eac79f.0":"2020-04-07T21:57:48.938Z","0.15.0-canary.ba05565e.0":"2020-04-08T17:33:00.582Z","0.15.0-canary.25099f79.0":"2020-04-08T21:31:04.387Z","0.15.0-canary.447e31c6.0":"2020-04-09T01:16:58.793Z","0.15.0-canary.d6dd84f7.0":"2020-04-09T01:25:33.770Z","0.15.0-canary.9b03ee68.0":"2020-04-09T20:03:16.780Z","0.15.0-canary.bbc25b10.0":"2020-04-10T22:46:09.502Z","0.15.0-canary.339cbfd4.0":"2020-04-15T17:39:07.215Z","0.15.0-canary.b74ff19f.0":"2020-04-15T20:04:49.038Z","0.15.0-canary.aaa16853.0":"2020-04-15T22:41:26.848Z","0.15.0-canary.826b23e7.0":"2020-04-16T18:57:36.270Z","0.15.0-canary.e1ad2b2f.0":"2020-04-17T23:01:54.380Z","0.15.0-canary.bade5580.0":"2020-04-17T23:19:40.144Z","0.15.0-canary.dae38247.0":"2020-04-18T00:16:34.297Z","0.15.0-canary.a04c0b82.0":"2020-04-18T00:34:43.374Z","0.15.0-canary.715decfe.0":"2020-04-20T18:35:53.258Z","0.15.0-canary.c862cd04.0":"2020-04-20T21:34:34.245Z","0.15.0-canary.e9b01b35.0":"2020-04-20T23:29:50.933Z","0.15.0-canary.ee7e8989.0":"2020-04-21T00:51:43.817Z","0.15.0-canary.9bf47ffa.0":"2020-04-21T18:38:46.647Z","0.15.0-canary.078dbd98.0":"2020-04-21T21:12:46.483Z","0.15.0-canary.953015d6.0":"2020-04-21T21:36:09.071Z","0.15.0-canary.c360ec63.0":"2020-04-21T21:59:24.859Z","0.15.0-canary.d71b65aa.0":"2020-04-21T22:38:08.238Z","0.15.0-canary.58d51135.0":"2020-04-23T00:45:17.952Z","0.15.0-canary.d0af8ba3.0":"2020-04-23T18:10:25.125Z","0.15.0-canary.8872b17b.0":"2020-04-23T20:41:28.662Z","0.15.0-canary.eca1a610.0":"2020-04-23T21:43:29.405Z","0.15.0-canary.baaf529e.0":"2020-04-23T22:44:48.582Z","0.15.0-canary.7a7992a8.0":"2020-04-23T23:14:48.954Z","0.15.0-canary.1150d64d.0":"2020-04-24T00:19:03.112Z","0.15.0-canary.dad3f828.0":"2020-04-25T00:43:09.980Z","0.15.0-canary.1bcdb47e.0":"2020-04-28T01:13:08.503Z","0.15.0-canary.86ff1b9f.0":"2020-04-28T02:56:09.365Z","0.15.0-canary.54a86b20.0":"2020-04-28T03:18:31.059Z","0.15.0-canary.938fd24b.0":"2020-04-30T01:27:39.333Z","0.15.0-canary.39e9a008.0":"2020-04-30T02:13:56.057Z","0.15.0-canary.f3b365de.0":"2020-04-30T08:27:47.568Z","0.15.0-canary.cdbdf807.0":"2020-05-01T00:15:15.887Z","0.15.0-canary.9995ae17.0":"2020-05-01T18:45:34.608Z","0.15.0-canary.457bf035.0":"2020-05-01T20:51:17.267Z","0.15.0-canary.2381fd02.0":"2020-05-01T21:26:06.363Z","0.15.0-canary.b2ca9b57.0":"2020-05-01T21:36:42.999Z","0.15.0-canary.b2b088e7.0":"2020-05-01T22:34:06.258Z","0.15.0-canary.fdd8f69e.0":"2020-05-02T00:16:57.297Z","0.15.0-canary.730f45a8.0":"2020-05-03T20:45:21.534Z","0.15.0-canary.4219bd20.0":"2020-05-04T23:32:48.530Z","0.15.0-canary.1d83cf6d.0":"2020-05-05T17:12:33.861Z","0.15.0-canary.3bfc63aa.0":"2020-05-05T18:14:15.134Z","0.15.0":"2020-05-05T22:36:30.759Z","0.16.0-canary.1f4e3d1c.0":"2020-05-06T22:04:54.674Z","0.16.0-canary.bc8759d5.0":"2020-05-07T23:15:10.538Z","0.16.0-canary.d1379acf.0":"2020-05-08T17:41:41.807Z","0.16.0-canary.58d51fc0.0":"2020-05-08T19:18:01.505Z","0.16.0-canary.588062d7.0":"2020-05-08T21:24:17.011Z","0.16.0-canary.fa21f639.0":"2020-05-11T17:30:33.094Z","0.16.0-canary.2772c509.0":"2020-05-11T18:37:09.096Z","0.16.0-canary.fc4796d5.0":"2020-05-11T20:05:56.971Z","0.16.0-canary.0d1c5f2c.0":"2020-05-11T21:20:15.598Z","0.16.0-canary.d083d93a.0":"2020-05-12T00:18:40.999Z","0.16.0-canary.c95d429c.0":"2020-05-12T21:37:25.902Z","0.16.0-canary.0c1ad726.0":"2020-05-13T00:34:45.847Z","0.16.0-canary.8b6a4700.0":"2020-05-13T17:19:58.051Z","0.16.0-canary.3270effb.0":"2020-05-13T21:25:04.287Z","0.16.0-canary.832e64f7.0":"2020-05-14T00:52:38.711Z","0.16.0-canary.472fc4fc.0":"2020-05-14T03:36:45.881Z","0.16.0-canary.4dcd7dd5.0":"2020-05-14T16:25:34.033Z","0.16.0-canary.bcd3400d.0":"2020-05-15T22:50:18.302Z","0.16.0-canary.91f63179.0":"2020-05-16T00:34:59.754Z","0.16.0-canary.b8aafb56.0":"2020-05-18T18:32:07.519Z","0.16.0-canary.a564b194.0":"2020-05-18T23:04:01.741Z","0.16.0-canary.ef56465b.0":"2020-05-19T03:48:24.452Z","0.16.0-canary.c22dcd71.0":"2020-05-19T17:24:50.147Z","0.16.0-canary.6eb62388.0":"2020-05-19T20:38:50.768Z","0.16.0-canary.9bc3230c.0":"2020-05-19T21:39:20.442Z","0.16.0-canary.421a6856.0":"2020-05-20T05:24:40.627Z","0.16.0-canary.761aa6f2.0":"2020-05-20T21:31:34.834Z","0.16.0-canary.f8654c40.0":"2020-05-20T21:40:49.813Z","0.16.0-canary.05f3853e.0":"2020-05-21T17:33:42.048Z","0.16.0-canary.5fe61f4e.0":"2020-05-21T23:08:10.212Z","0.16.0-canary.17d33745.0":"2020-05-26T16:14:18.837Z","0.16.0-canary.e8b52f5b.0":"2020-05-26T18:43:19.238Z","0.16.0-canary.09afa0a9.0":"2020-05-26T21:44:33.923Z","0.16.0-canary.58bc9166.0":"2020-05-27T00:30:46.582Z","0.16.0-canary.43bde144.0":"2020-05-27T18:29:42.671Z","0.16.0-canary.51067bbc.0":"2020-05-27T20:03:40.060Z","0.16.0-canary.92751ffa.0":"2020-05-27T21:36:59.292Z","0.16.0-canary.aa2b40bb.0":"2020-05-28T19:15:27.894Z","0.16.0-canary.1a870a01.0":"2020-05-28T21:19:02.595Z","0.16.0-canary.ad57d086.0":"2020-05-29T23:49:35.827Z","0.16.0-canary.3bf2b4d5.0":"2020-05-30T00:37:09.889Z","0.16.0-canary.ac05f090.0":"2020-05-30T02:50:16.051Z","0.16.0-canary.0ba7b095.0":"2020-05-30T02:56:54.952Z","0.16.0-canary.5eaa9bac.0":"2020-06-01T23:29:20.930Z","0.16.0-canary.5677ac20.0":"2020-06-01T23:57:44.391Z","0.16.0-canary.7ac6bff4.0":"2020-06-02T00:16:05.229Z","0.16.0-canary.d45622aa.0":"2020-06-02T23:46:20.741Z","0.16.0-canary.dc26c709.0":"2020-06-05T20:21:25.792Z","0.16.0-canary.b9baf6db.0":"2020-06-05T20:22:52.631Z","0.16.0-canary.e0b8c9d0.0":"2020-06-05T23:05:22.254Z","0.16.0-canary.51552859.0":"2020-06-10T00:08:37.174Z","0.16.0-canary.2e269285.0":"2020-06-10T01:36:07.983Z","0.16.0-canary.be138b01.0":"2020-06-10T20:49:35.666Z","0.16.0-canary.04bccf5a.0":"2020-06-16T00:59:34.697Z","0.16.0-canary.b44dea36.0":"2020-06-16T20:58:19.594Z","0.16.0-canary.e2577e87.0":"2020-06-16T21:09:07.089Z","0.16.0-canary.58b73343.0":"2020-06-16T21:24:06.269Z","0.16.0-canary.f155c058.0":"2020-06-18T18:08:17.057Z","0.16.0-canary.309779d2.0":"2020-06-18T23:59:03.809Z","0.16.0-canary.e7649968.0":"2020-06-19T21:41:10.215Z","0.16.0-canary.8e21c78b.0":"2020-06-22T10:38:10.880Z","0.16.0-canary.6db76faf.0":"2020-06-22T21:13:08.957Z","0.16.0-canary.c4dd9684.0":"2020-06-23T15:15:44.674Z","0.16.0-canary.b3e53981.0":"2020-06-24T00:39:43.919Z","0.16.0-canary.b9468f77.0":"2020-06-24T21:55:04.662Z","0.16.0-canary.eb790e49.0":"2020-06-25T21:19:20.860Z","0.16.0-canary.9aa1a5c5.0":"2020-06-26T17:05:43.283Z","0.16.0-canary.d36e9861.0":"2020-06-26T17:36:49.368Z","0.16.0-canary.155c2f85.0":"2020-06-26T23:30:37.189Z","0.16.0-canary.340c9c40.0":"2020-06-26T23:38:43.136Z","0.16.0-canary.a3384d2d.0":"2020-06-30T21:00:54.292Z","0.17.0-canary.6d056c96.0":"2020-06-30T21:10:14.043Z","0.16.1":"2020-06-30T21:15:08.492Z","0.17.0-canary.f7e37607.0":"2020-06-30T21:44:36.720Z","0.17.0":"2020-07-01T19:44:35.545Z","0.18.0-canary.0afbfef2.0":"2020-07-01T19:45:11.337Z","0.18.0-canary.fd970958.0":"2020-07-01T23:33:55.632Z","0.18.0-canary.fd44be19.0":"2020-07-02T05:48:58.512Z","0.17.2":"2020-07-02T05:58:36.212Z","0.18.0-canary.ca6fc6de.0":"2020-07-02T05:59:48.900Z","0.18.0-canary.79f1ec2a.0":"2020-07-07T17:33:06.208Z","0.18.0-canary.a7bc45ae.0":"2020-07-09T17:23:44.900Z","0.18.0-canary.b184bc1c.0":"2020-07-09T17:32:55.151Z","0.18.0-canary.b39fde62.0":"2020-07-09T17:38:09.535Z","0.18.0-canary.dfdd8d6c.0":"2020-07-09T18:26:17.284Z","0.18.0-canary.11cf2694.0":"2020-07-09T20:43:58.746Z","0.18.0-canary.436d66e9.0":"2020-07-09T20:48:47.268Z","0.18.0-canary.3a44d36b.0":"2020-07-10T00:37:48.677Z","0.18.0-canary.ec11ae6e.0":"2020-07-10T17:53:34.109Z","0.18.0-canary.17f6cf27.0":"2020-07-10T18:33:15.483Z","0.18.0-canary.efdfbc21.0":"2020-07-10T18:45:06.268Z","0.18.0-canary.bae4339a.0":"2020-07-14T16:42:28.434Z","0.18.0-canary.28eac13b.0":"2020-07-14T22:24:00.402Z","0.18.0-canary.44966b65.0":"2020-07-15T18:05:31.075Z","0.18.0-canary.3ef0ef60.0":"2020-07-16T16:55:18.099Z","0.18.0-canary.fcebf9e6.0":"2020-07-20T18:46:32.008Z","0.18.0-canary.b6a772df.0":"2020-07-20T22:47:04.229Z","0.18.0-canary.f6a6ca38.0":"2020-07-21T16:41:24.171Z","0.18.0-canary.647dd6b7.0":"2020-07-21T18:45:01.237Z","0.18.0-canary.3cb7406f.0":"2020-07-22T18:57:59.755Z","0.18.0-canary.5717a5a1.0":"2020-07-22T21:40:21.117Z","0.18.0-canary.d84cd4b2.0":"2020-07-22T21:42:24.389Z","0.18.0-canary.f279e7fc.0":"2020-07-22T22:01:11.508Z","0.18.0-canary.f181e3bc.0":"2020-07-22T22:03:10.402Z","0.18.0-canary.346a622a.0":"2020-07-22T23:40:26.160Z","0.18.0-canary.c9e8a848.0":"2020-07-23T01:10:54.741Z","0.18.0-canary.718c385c.0":"2020-07-23T20:06:59.406Z","0.18.0-canary.cd516a27.0":"2020-07-24T19:11:19.562Z","0.18.0-canary.1f082191.0":"2020-07-24T19:16:39.022Z","0.18.0-canary.ea3e82dc.0":"2020-07-24T19:21:54.106Z","0.18.0-canary.94987b64.0":"2020-07-24T20:27:00.377Z","0.18.0-canary.ff49b7e2.0":"2020-07-27T19:05:21.424Z","0.18.0-canary.3d334ccc.0":"2020-07-28T16:15:43.370Z","0.18.0-canary.82ac569e.0":"2020-07-28T18:42:54.864Z","0.18.0-canary.99df7397.0":"2020-07-29T02:41:03.588Z","0.18.0-canary.45493e05.0":"2020-07-29T17:17:06.620Z","0.18.0-canary.f2ab0a95.0":"2020-07-29T17:22:06.792Z","0.18.0-canary.45f9eddc.0":"2020-07-30T00:55:19.755Z","0.18.0-canary.b64663ea.0":"2020-07-30T17:43:44.871Z","0.18.0-canary.9a1a4d2d.0":"2020-07-30T21:04:50.182Z","0.18.0-canary.887c2848.0":"2020-07-30T22:06:09.746Z","0.18.0-canary.354eb695.0":"2020-07-30T23:58:23.423Z","0.18.0-canary.7beb236c.0":"2020-07-31T17:41:03.472Z","0.18.0-canary.c44acc0c.0":"2020-07-31T21:11:42.287Z","0.18.0-canary.779853ff.0":"2020-08-03T17:24:15.043Z","0.18.0-canary.8aaf270b.0":"2020-08-03T18:41:19.581Z","0.18.0-canary.5cde9f12.0":"2020-08-03T19:01:45.046Z","0.18.0-canary.1607ec53.0":"2020-08-03T19:47:19.372Z","0.18.0-canary.678b30e3.0":"2020-08-03T19:51:10.189Z","0.18.0-canary.21c55569.0":"2020-08-03T19:57:22.387Z","0.19.0-canary.907d4d7d.0":"2020-08-03T21:23:01.328Z","0.18.0":"2020-08-03T21:24:49.066Z","0.19.0-canary.f7958e4a.0":"2020-08-04T02:07:26.456Z","0.19.0-canary.f8ceaf79.0":"2020-08-04T19:18:41.949Z","0.19.0-canary.6b9e385a.0":"2020-08-04T21:30:23.336Z","0.19.0-canary.9a7e6d2a.0":"2020-08-05T03:46:33.172Z","0.19.0-canary.188f3f1c.0":"2020-08-05T18:13:59.418Z","0.19.0-canary.b6106add.0":"2020-08-05T20:50:00.405Z","0.19.0-canary.ebb4c667.0":"2020-08-06T00:19:25.350Z","0.19.0-canary.aa44289e.0":"2020-08-06T18:27:58.440Z","0.19.0-canary.e6b0816b.0":"2020-08-07T18:44:26.210Z","0.19.0-canary.96d15938.0":"2020-08-07T20:29:31.999Z","0.19.0-canary.9d991c8c.0":"2020-08-07T22:09:01.577Z","0.19.0-canary.13bfbd72.0":"2020-08-10T19:27:57.770Z","0.19.0-canary.30b1b258.0":"2020-08-10T20:07:32.467Z","0.19.0-canary.1583e263.0":"2020-08-11T23:11:20.994Z","0.19.0-canary.fefb1a93.0":"2020-08-12T00:25:46.761Z","0.19.0-canary.1ac5b9d4.0":"2020-08-12T18:27:59.863Z","0.19.0-canary.f17f5052.0":"2020-08-13T17:15:07.812Z","0.19.0-canary.80b5d20d.0":"2020-08-13T18:17:54.841Z","0.19.0-canary.758635ed.0":"2020-08-14T17:17:17.579Z","0.19.0-canary.18d6b808.0":"2020-08-14T23:08:37.720Z","0.19.0-canary.5f8ffbd1.0":"2020-08-17T22:16:13.508Z","0.19.0-canary.8604d59e.0":"2020-08-18T01:03:19.569Z","0.19.0-canary.1d7d5e34.0":"2020-08-18T01:09:33.243Z","0.19.0-canary.9cc95c07.0":"2020-08-18T01:17:12.609Z","0.19.0-canary.9f65ced3.0":"2020-08-18T20:16:50.380Z","0.19.0-canary.5962b365.0":"2020-08-19T20:29:42.363Z","0.19.0-canary.9c9ec756.0":"2020-08-20T18:56:28.116Z","0.19.0-canary.fa0ad66a.0":"2020-08-20T20:35:38.475Z","0.19.0-canary.06ecdd6b.0":"2020-08-20T21:34:33.168Z","0.19.0-canary.2bca2318.0":"2020-08-21T17:53:07.426Z","0.19.0-canary.6aa47265.0":"2020-08-21T18:16:47.260Z","0.19.0-canary.e7202a07.0":"2020-08-21T19:24:17.538Z","0.19.0-canary.f208201e.0":"2020-08-24T19:03:50.704Z","0.19.0-canary.14a172db.0":"2020-08-25T19:48:29.200Z","0.19.0-canary.e6c1038d.0":"2020-08-27T19:37:41.568Z","0.19.0-canary.34012082.0":"2020-08-27T19:49:03.160Z","0.19.0-canary.c073f7b8.0":"2020-08-28T17:12:44.271Z","0.19.0-canary.b7ae68ff.0":"2020-08-29T01:27:42.541Z","0.19.0-canary.697e3879.0":"2020-09-02T00:13:59.155Z","0.19.0-canary.eafb7991.0":"2020-09-02T02:18:55.225Z","0.19.0-canary.606642ec.0":"2020-09-02T21:36:19.507Z","0.19.0-canary.ddf05c42.0":"2020-09-03T13:53:44.182Z","0.19.0-canary.b889e6dc.0":"2020-09-03T14:11:58.036Z","0.19.0-canary.aabeceb0.0":"2020-09-03T19:58:09.531Z","0.19.0-canary.d8cca3a6.0":"2020-09-03T21:32:10.809Z","0.19.0-canary.26d34b2e.0":"2020-09-03T21:57:38.191Z","0.19.0-canary.a1c44494.0":"2020-09-09T22:08:15.491Z","0.19.0-canary.be1cd1e9.0":"2020-09-10T16:41:43.905Z","0.19.0-canary.f094c0ce.0":"2020-09-10T17:36:50.859Z","0.19.0-canary.c1261e7d.0":"2020-09-11T02:27:03.275Z","0.19.0-canary.9b39ed1e.0":"2020-09-11T02:27:53.340Z","0.19.0-canary.e67214b3.0":"2020-09-11T02:32:11.366Z","0.19.0-canary.36f5da28.0":"2020-09-11T02:34:54.936Z","0.19.0-canary.3babab12.0":"2020-09-11T02:38:01.685Z","0.19.0-canary.a4481e6f.0":"2020-09-11T02:49:58.039Z","0.19.0-canary.a9177836.0":"2020-09-11T17:48:08.694Z","0.19.0-canary.b102a3c8.0":"2020-09-14T20:13:59.338Z","0.19.0-canary.a7fbc707.0":"2020-09-15T16:06:30.048Z","0.19.0-canary.ed6b8660.0":"2020-09-15T17:25:29.108Z","0.19.0-canary.9c2331f5.0":"2020-09-15T17:50:01.728Z","0.19.0-canary.63a5f088.0":"2020-09-16T21:38:37.877Z","0.19.0-canary.b7995e49.0":"2020-09-16T23:27:14.221Z","0.19.0-canary.0da3ec97.0":"2020-09-21T22:09:19.074Z","0.19.0-canary.a0793c96.0":"2020-09-22T17:05:15.377Z","0.19.0-canary.06998a3e.0":"2020-09-22T18:26:25.143Z","0.19.0-canary.3484a90d.0":"2020-09-22T22:04:48.841Z","0.19.0-canary.3f99af40.0":"2020-09-24T23:22:05.719Z","0.19.0-canary.72aa1129.0":"2020-09-25T21:08:01.513Z","0.19.0-canary.394fd3f6.0":"2020-09-28T14:13:14.734Z","0.19.0-canary.347110f1.0":"2020-09-28T16:51:00.422Z","0.19.0-canary.5e330bb9.0":"2020-09-30T22:01:52.589Z","0.19.0-canary.30b9e3a9.0":"2020-09-30T22:38:55.656Z","0.19.0-canary.7bb04b9a.0":"2020-10-01T23:23:43.096Z","0.19.0-canary.615d861d.0":"2020-10-02T01:34:06.807Z","0.19.0-canary.af110e86.0":"2020-10-02T23:50:37.249Z","0.19.0-canary.89d27ca5.0":"2020-10-06T01:27:43.442Z","0.19.0-canary.9ef2e7c2.0":"2020-10-07T00:15:05.021Z","0.19.0-canary.96c8bdc1.0":"2020-10-07T20:08:21.618Z","0.20.0-canary.6c21f034.0":"2020-10-07T22:31:10.327Z","0.19.0":"2020-10-07T22:33:39.401Z","0.20.0-canary.1f026aaa.0":"2020-10-08T22:54:21.089Z","0.19.1":"2020-10-08T23:06:21.030Z","0.20.0-canary.5f6894b1.0":"2020-10-08T23:07:55.205Z","0.20.0-canary.f6260d06.0":"2020-10-12T22:34:57.646Z","0.20.0-canary.2d1b08aa.0":"2020-10-13T19:22:56.159Z","0.20.0-canary.5bd58844.0":"2020-10-13T23:47:00.648Z","0.20.0-canary.bc846b29.0":"2020-10-14T18:16:35.499Z","0.20.0-canary.3280b686.0":"2020-10-16T00:05:08.866Z","0.20.0-canary.9e94cd38.0":"2020-10-16T21:15:11.201Z","0.20.0-canary.4773c773.0":"2020-10-16T22:34:52.734Z","0.20.0-canary.65787913.0":"2020-10-19T18:51:44.439Z","0.20.0-canary.5485fba3.0":"2020-10-19T21:24:55.774Z","0.20.0-canary.a39d0a92.0":"2020-10-23T21:24:31.955Z","0.20.0-canary.4eafcbc1.0":"2020-10-27T01:21:42.282Z","0.20.0-canary.32961593.0":"2020-10-28T00:39:53.301Z","0.20.0-canary.8e3a0601.0":"2020-10-29T21:37:47.210Z","0.20.0-canary.178c25b4.0":"2020-10-29T21:51:16.961Z","0.20.0-canary.124beb49.0":"2020-10-31T00:07:12.841Z","0.20.0-canary.5937f468.0":"2020-11-04T21:06:36.618Z","0.20.0-canary.a9bafaee.0":"2020-11-05T22:31:27.253Z","0.20.0-canary.184861ee.0":"2020-11-07T00:38:20.285Z","0.20.0-canary.6c6ae2d6.0":"2020-11-09T13:06:34.965Z","0.20.0-canary.ea2aa477.0":"2020-11-09T23:58:45.953Z","0.20.0-canary.a2c088dc.0":"2020-11-10T14:24:59.360Z","0.20.0-canary.b04d71d4.0":"2020-11-12T10:42:41.171Z","0.20.0-canary.2c553352.0":"2020-11-12T22:43:26.275Z","0.20.0-canary.6560d19a.0":"2020-11-13T20:49:08.337Z","0.20.0-canary.a28d5ec3.0":"2020-11-17T15:24:46.397Z","0.20.0-canary.03e7e778.0":"2020-11-17T19:27:00.352Z","0.20.0-canary.ac8ed597.0":"2020-11-17T22:12:37.604Z","0.20.0-canary.b6a60f60.0":"2020-11-17T22:53:05.195Z","0.20.0-canary.71cc24fb.0":"2020-11-17T23:17:25.237Z","0.20.0-canary.761027ff.0":"2020-11-18T22:15:01.675Z","0.20.0-canary.dc93d04c.0":"2020-11-18T22:20:32.733Z","0.20.0-canary.4a5d4eeb.0":"2020-11-19T11:31:16.618Z","0.20.0-canary.bd176a15.0":"2020-11-19T19:11:16.009Z","0.20.0-canary.e85aa60d.0":"2020-11-23T22:25:24.901Z","0.20.0-canary.72092360.0":"2020-11-24T04:18:49.805Z","0.20.0-canary.baf9d39f.0":"2020-11-25T21:48:59.348Z","0.20.0-canary.51aab0ad.0":"2020-12-01T01:06:02.218Z","0.20.0-canary.8fd4af5b.0":"2020-12-03T00:27:56.395Z","0.20.0-canary.26d14d2f.0":"2020-12-03T00:56:34.824Z","0.20.0-canary.1663d7e4.0":"2020-12-03T01:17:10.231Z","0.20.0-canary.cbe9fc12.0":"2020-12-03T19:07:58.003Z","0.20.0-canary.9755be10.0":"2020-12-03T19:26:00.926Z","0.20.0-canary.3f64270c.0":"2020-12-03T21:50:33.281Z","0.21.0-canary.d893b14a.0":"2020-12-03T22:26:42.889Z","0.20.0":"2020-12-03T22:29:09.258Z","0.21.0-canary.47c7d7e5.0":"2020-12-11T19:57:28.877Z","0.21.0-canary.b304a78b.0":"2020-12-15T20:04:43.154Z","0.21.0-canary.777c5fa4.0":"2020-12-16T21:54:40.337Z","0.21.0-canary.635c7996.0":"2020-12-17T23:32:42.871Z","0.21.0-canary.20b0045f.0":"2020-12-17T23:49:34.112Z","0.21.0-canary.41f77000.0":"2020-12-18T00:35:54.921Z","0.21.0-canary.afe4079a.0":"2020-12-22T17:40:25.088Z","0.21.0-canary.407ef8f9.0":"2020-12-30T23:03:17.212Z","0.21.0-canary.2e26e137.0":"2021-01-05T18:50:16.204Z","0.21.0-canary.9009f6c1.0":"2021-01-08T19:54:58.259Z","0.21.0-canary.ee99b646.0":"2021-01-11T23:08:51.836Z","0.21.0-canary.740ed33b.0":"2021-01-12T18:04:42.946Z","0.21.0-canary.c5c541b1.0":"2021-01-12T18:46:18.301Z","0.21.0-canary.06fe9d90.0":"2021-01-12T20:55:39.111Z","0.21.0-canary.269eed01.0":"2021-01-13T21:46:02.029Z","0.21.0-canary.8c075f35.0":"2021-01-13T23:08:01.152Z","0.21.0-canary.3cda381b.0":"2021-01-14T00:05:13.222Z","0.21.0-canary.bc113605.0":"2021-01-14T00:46:07.156Z","0.21.0-canary.0c1d6ff9.0":"2021-01-15T20:09:56.686Z","0.21.0-canary.b4332e00.0":"2021-01-15T22:08:07.613Z","0.21.0-canary.2899691d.0":"2021-01-16T01:45:15.755Z","0.21.0-canary.fe73953b.0":"2021-01-19T19:22:03.458Z","0.21.0-canary.d3a16455.0":"2021-01-19T19:52:58.417Z","0.21.0-canary.597ca1b6.0":"2021-01-20T01:00:43.214Z","0.21.0-canary.3c195efe.0":"2021-01-20T02:02:11.473Z","0.21.0-canary.f7b8755f.0":"2021-01-20T20:38:21.522Z","0.21.0-canary.f60de7df.0":"2021-01-20T23:37:22.226Z","0.21.0-canary.664a2927.0":"2021-01-21T19:19:14.530Z","0.21.0-canary.a6d312e5.0":"2021-01-21T21:48:09.182Z","0.21.0-canary.027365eb.0":"2021-01-22T21:08:11.652Z","0.21.0-canary.7e72b66d.0":"2021-01-22T23:27:10.697Z","0.21.0-canary.a6d6a1e7.0":"2021-01-22T23:33:24.372Z","0.21.0-canary.b95fe100.0":"2021-01-22T23:52:33.223Z","0.21.0-canary.c8797192.0":"2021-01-23T00:07:53.115Z","0.21.0-canary.946f5563.0":"2021-01-23T00:44:13.139Z","0.21.0-canary.43664f0e.0":"2021-01-25T22:40:51.705Z","0.21.0-canary.2e769e3c.0":"2021-01-26T00:06:55.651Z","0.21.0-canary.14e01610.0":"2021-01-27T19:52:08.596Z","0.21.0-canary.5de00c1b.0":"2021-01-27T20:17:49.318Z","0.21.0-canary.5a328336.0":"2021-01-28T19:55:24.537Z","0.21.0-canary.533b1251.0":"2021-01-29T15:12:28.674Z","0.21.0-canary.ab5c0a10.0":"2021-02-02T20:18:07.419Z","0.21.0-canary.b7a40b27.0":"2021-02-03T15:04:38.343Z","0.21.0-canary.0fdee204.0":"2021-02-03T18:34:43.079Z","0.21.0-canary.5160e548.0":"2021-02-05T23:51:55.392Z","0.21.0-canary.4fa2daec.0":"2021-02-09T00:19:33.157Z","0.21.0-canary.67f285fb.0":"2021-02-09T00:51:51.335Z","0.21.0-canary.58cd5a70.0":"2021-02-11T20:45:48.682Z","0.21.0-canary.8107ca43.0":"2021-02-11T23:29:44.193Z","0.21.0-canary.d35d64ef.0":"2021-02-11T23:43:48.174Z","0.21.0-canary.78bcf058.0":"2021-02-12T00:49:02.014Z","0.21.0-canary.0c6908fd.0":"2021-02-12T01:25:31.969Z","0.21.0-canary.f1f34ee0.0":"2021-02-12T20:18:47.851Z","0.21.0-canary.d84df029.0":"2021-02-16T19:09:03.622Z","0.21.0-canary.c525f471.0":"2021-02-17T20:54:18.032Z","0.21.0-canary.ba7a1b35.0":"2021-02-19T00:14:47.192Z","0.21.0-canary.9a566dda.0":"2021-02-19T18:38:55.942Z","0.21.0-canary.55addb8c.0":"2021-02-19T22:02:58.700Z","0.21.0-canary.85dd5e9b.0":"2021-02-23T02:20:10.601Z","0.21.0-canary.aa3e078e.0":"2021-02-23T17:15:56.656Z","0.21.0-canary.dccd254e.0":"2021-02-26T21:10:57.636Z","0.21.0-canary.7dd1a27d.0":"2021-03-01T22:01:50.739Z","0.21.0-canary.12574572.0":"2021-03-02T20:30:11.686Z","0.21.0-canary.1109a3d3.0":"2021-03-02T20:35:25.835Z","0.21.0-canary.b9cd8739.0":"2021-03-03T17:48:52.260Z","0.21.0-canary.71ee796a.0":"2021-03-03T20:12:00.392Z","0.21.0-canary.2be191ed.0":"2021-03-03T21:52:24.858Z","0.21.0-canary.6dc7b06f.0":"2021-03-05T00:23:06.543Z","0.21.0-canary.24fe7ba6.0":"2021-03-05T17:27:53.116Z","0.21.0-canary.12c477d1.0":"2021-03-08T22:24:13.784Z","0.21.0-canary.4c38f801.0":"2021-03-08T23:25:28.685Z","0.21.0-canary.8795b83f.0":"2021-03-09T18:28:13.341Z","0.21.0-canary.12b84cb7.0":"2021-03-10T00:41:55.509Z","0.21.0-canary.6ac6784b.0":"2021-03-10T00:52:20.911Z","0.21.0-canary.b6d92934.0":"2021-03-10T22:01:42.111Z","0.21.0-canary.99a55b9e.0":"2021-03-10T22:52:29.467Z","0.21.0-canary.bb14efb7.0":"2021-03-10T23:37:57.576Z","0.21.0-canary.9ecf3bdd.0":"2021-03-11T00:24:31.567Z","0.21.0-canary.7c0e02fd.0":"2021-03-11T01:47:24.632Z","0.21.0-canary.2d6d59cc.0":"2021-03-11T18:30:18.197Z","0.21.0-canary.0138863c.0":"2021-03-11T18:37:40.056Z","0.21.0-canary.926f5bad.0":"2021-03-11T20:19:27.449Z","0.21.0-canary.520290a9.0":"2021-03-11T22:28:45.322Z","0.21.0-canary.9ec431d1.0":"2021-03-11T22:33:08.926Z","0.21.0-canary.4246c082.0":"2021-03-11T22:40:08.068Z","0.21.0-canary.2d736253.0":"2021-03-15T22:36:35.390Z","0.21.0-canary.7033124d.0":"2021-03-16T18:38:23.715Z","0.21.0-canary.6c0ee901.0":"2021-03-16T22:39:48.590Z","0.21.0-canary.7f0d605e.0":"2021-03-17T18:05:32.950Z","0.21.0-canary.572107b5.0":"2021-03-18T23:55:00.984Z","0.21.0-canary.b7b220b1.0":"2021-03-19T00:20:46.856Z","0.21.0-canary.233b2de7.0":"2021-03-19T18:30:41.259Z","0.21.0-canary.0c1a2d97.0":"2021-03-19T21:22:03.636Z","0.21.0-canary.57ca2e73.0":"2021-03-19T22:41:46.951Z","0.21.0-canary.5c058f4b.0":"2021-03-23T23:09:13.325Z","0.21.0-canary.e27ef7cd.0":"2021-03-30T20:12:07.316Z","0.21.0-canary.15c09e74.0":"2021-03-31T16:48:30.930Z","0.21.0-canary.4dc32be3.0":"2021-03-31T23:49:00.606Z","0.21.0-canary.4b717f65.0":"2021-04-01T18:15:17.161Z","0.21.0-canary.c6870f20.0":"2021-04-01T23:42:52.964Z","0.21.0-canary.852f873c.0":"2021-04-02T05:22:55.451Z","0.21.0-canary.4a674a1d.0":"2021-04-02T14:45:03.733Z","0.21.0-canary.c5b29ff1.0":"2021-04-05T17:50:46.426Z","0.21.0-canary.583644a6.0":"2021-04-05T17:51:47.412Z","0.21.0-canary.02ac1e6b.0":"2021-04-06T18:37:12.321Z","0.21.0-canary.5ac5856e.0":"2021-04-06T18:43:29.780Z","0.21.0-canary.bb23dbc4.0":"2021-04-07T21:24:34.813Z","0.21.0-canary.e539904c.0":"2021-04-08T18:02:41.006Z","0.21.0-canary.a93ae333.0":"2021-04-09T20:12:22.604Z","0.21.0-canary.e142c144.0":"2021-04-12T14:51:19.887Z","0.21.0-canary.382d7eb0.0":"2021-04-12T22:06:07.119Z","0.21.0-canary.b16c7885.0":"2021-04-12T22:39:57.225Z","0.21.0-canary.0e92782b.0":"2021-04-13T14:42:34.892Z","0.21.0-canary.70b3a072.0":"2021-04-14T22:26:56.623Z","0.21.0-canary.ff79b092.0":"2021-04-15T19:00:42.621Z","0.21.0-canary.f35b2fd7.0":"2021-04-15T19:11:04.062Z","0.21.0-canary.11977cac.0":"2021-04-16T00:58:42.702Z","0.21.0-canary.018ff45e.0":"2021-04-22T22:51:40.855Z","0.21.0-canary.c99d1fa5.0":"2021-04-26T19:47:14.315Z","0.21.0-canary.eea9b304.0":"2021-04-27T22:53:46.848Z","0.21.0-canary.5dd85d0c.0":"2021-04-28T00:10:09.923Z","0.21.0-canary.cc813cff.0":"2021-04-30T21:20:06.887Z","0.21.0-canary.0875e898.0":"2021-04-30T21:28:07.943Z","0.21.0":"2021-04-30T23:58:21.303Z","0.22.0-canary.8f1e7e1b.0":"2021-05-01T00:05:56.002Z","0.22.0-canary.deb0e792.0":"2021-05-03T21:34:51.935Z","0.22.0-canary.a3ff615f.0":"2021-05-03T22:34:13.968Z","0.22.0-canary.948ccfb5.0":"2021-05-04T00:11:19.948Z","0.22.0-canary.9f8337d7.0":"2021-05-04T18:37:33.334Z","0.22.0-canary.5813480a.0":"2021-05-05T18:26:02.988Z","0.22.0-canary.ab7fc1bf.0":"2021-05-06T18:00:10.163Z","0.22.0-canary.25693d60.0":"2021-05-07T21:56:44.541Z","0.22.0-canary.c497962b.0":"2021-05-07T22:20:31.393Z","0.22.0-canary.e300688e.0":"2021-05-07T22:24:57.979Z","0.22.0-canary.d70287f2.0":"2021-05-10T19:29:57.283Z","0.22.0-canary.02e841b2.0":"2021-05-10T20:35:13.502Z","0.22.0-canary.badda2f0.0":"2021-05-11T00:35:20.773Z","0.22.0-canary.004aca62.0":"2021-05-11T18:06:59.916Z","0.22.0-canary.4af17446.0":"2021-05-11T18:46:46.065Z","0.22.0-canary.b94d7187.0":"2021-05-11T18:52:18.142Z","0.22.0-canary.4021b2f9.0":"2021-05-12T22:01:15.827Z","0.22.0-canary.6a5956a3.0":"2021-05-12T22:18:00.209Z","0.22.0-canary.b6e8a74b.0":"2021-05-12T23:04:00.187Z","0.22.0-canary.c94e1030.0":"2021-05-12T23:09:49.859Z","0.22.0-canary.40a34e35.0":"2021-05-12T23:59:05.427Z","0.22.0-canary.1be14d2c.0":"2021-05-13T17:50:30.777Z","0.22.0-canary.87dbd64f.0":"2021-05-14T20:59:08.159Z","0.22.0-canary.c452e4da.0":"2021-05-17T23:32:42.645Z","0.22.0-canary.2212691a.0":"2021-05-17T23:53:18.631Z","0.22.0-canary.f748ff2f.0":"2021-05-18T00:23:11.429Z","0.22.0-canary.cc04657a.0":"2021-05-18T01:21:36.072Z","0.22.0-canary.3a3114fa.0":"2021-05-19T23:40:53.867Z","0.22.0-canary.b46bdf83.0":"2021-05-20T01:51:41.408Z","0.22.0-canary.b401a081.0":"2021-05-21T23:23:41.964Z","0.22.0-canary.012c8dc0.0":"2021-05-22T00:17:06.115Z","0.22.0-canary.e01a1731.0":"2021-05-24T16:03:30.469Z","0.22.0-canary.59174b9f.0":"2021-05-25T18:02:59.502Z","0.22.0-canary.c96cb2e0.0":"2021-05-25T19:13:01.178Z","0.22.0-canary.b9b0e330.0":"2021-05-25T21:01:06.042Z","0.22.0-canary.ea2a8063.0":"2021-05-25T21:06:12.658Z","0.22.0-canary.60cd9178.0":"2021-05-25T23:14:43.446Z","0.22.0-canary.b99c77d5.0":"2021-05-26T19:13:59.741Z","0.22.0-canary.0de82c12.0":"2021-05-26T21:31:48.999Z","0.22.0-canary.227a4614.0":"2021-05-27T16:04:01.086Z","0.22.0-canary.b3d21d31.0":"2021-05-27T18:45:58.704Z","0.22.0-canary.288c33ec.0":"2021-06-02T19:33:43.789Z","0.22.0-canary.7eb7ccb0.0":"2021-06-03T19:55:47.208Z","0.22.0-canary.7fcc0726.0":"2021-06-08T00:46:13.378Z","0.22.0-canary.220a4e5e.0":"2021-06-08T17:50:49.179Z","0.22.0-canary.6b2d6ab0.0":"2021-06-08T18:37:19.268Z","0.22.0-canary.2b20825e.0":"2021-06-11T23:49:40.199Z","0.22.0-canary.e1511867.0":"2021-06-12T00:57:57.222Z","0.22.0-canary.ef4a0c0d.0":"2021-06-15T19:52:34.395Z","0.22.0-canary.573d8913.0":"2021-06-18T23:27:26.533Z","0.22.0-canary.21dba001.0":"2021-06-21T21:41:16.623Z","0.22.0-canary.6f5bfd0f.0":"2021-06-24T22:56:44.329Z","0.22.0-canary.fd8360b4.0":"2021-06-25T19:09:48.588Z","0.22.0-canary.6f74432f.0":"2021-06-25T20:47:40.712Z","0.22.0-canary.b62f901d.0":"2021-06-25T22:17:57.845Z","0.22.0-canary.73122cba.0":"2021-06-30T19:37:29.802Z","0.22.0-canary.a6912af5.0":"2021-07-01T21:34:44.400Z","0.22.0-canary.134f24bf.0":"2021-07-01T22:33:03.382Z","0.22.0-canary.1debb78f.0":"2021-07-07T00:47:07.135Z","0.22.0-canary.d53edeb6.0":"2021-07-07T17:00:58.422Z","0.22.0-canary.2226489a.0":"2021-07-08T18:02:12.330Z","0.22.0-canary.d4801c11.0":"2021-07-08T20:03:26.383Z","0.22.0-canary.7ec5f2d6.0":"2021-07-12T17:17:32.594Z","0.22.0-canary.86cb4ca7.0":"2021-07-13T17:38:20.908Z","0.22.0-canary.bc9a724e.0":"2021-07-13T18:42:45.407Z","0.22.0-canary.7847b83a.0":"2021-07-14T17:19:21.439Z","0.22.0-canary.8cba18fa.0":"2021-07-14T20:27:18.752Z","0.22.1":"2021-07-14T22:53:09.561Z","0.23.0-canary.fbc09b4e.0":"2021-07-14T22:54:50.266Z","0.23.0-canary.73e9f83c.0":"2021-07-15T20:40:13.581Z","0.23.0-canary.cc0aa7a9.0":"2021-07-15T21:04:26.503Z","0.23.0-canary.a8fcac45.0":"2021-07-15T21:23:17.066Z","0.23.0-canary.3ca580d1.0":"2021-07-15T22:04:43.905Z","0.23.0-canary.9e41cb2e.0":"2021-07-15T23:09:28.688Z","0.23.0-canary.c180db74.0":"2021-07-16T17:25:39.148Z","0.23.0-canary.0d0a9267.0":"2021-07-16T17:57:53.193Z","0.23.0-canary.d234ec3f.0":"2021-07-16T18:08:24.782Z","0.23.0-canary.5cd4bcdb.0":"2021-07-16T21:12:46.443Z","0.23.0-canary.2b133cb2.0":"2021-07-16T22:07:14.986Z","0.23.0-canary.ae4f422b.0":"2021-07-16T23:54:42.776Z","0.23.0-canary.90ff8057.0":"2021-07-19T14:08:28.324Z","0.23.0-canary.dd7b75d1.0":"2021-07-19T17:51:24.860Z","0.23.0-canary.104debd5.0":"2021-07-19T22:54:14.916Z","0.23.0-canary.4612705d.0":"2021-07-20T16:05:20.572Z","0.23.0-canary.b36502a2.0":"2021-07-21T22:35:17.936Z","0.23.0-canary.2c392ab3.0":"2021-07-22T14:53:36.013Z","0.23.0-canary.e8bac95a.0":"2021-07-22T18:53:34.221Z","0.23.0-canary.38f29f8f.0":"2021-07-23T18:16:43.071Z","0.23.0-canary.e0693475.0":"2021-07-23T18:56:52.937Z","0.23.0-canary.d595e030.0":"2021-07-23T20:53:53.487Z","0.23.0-canary.fe7cca31.0":"2021-07-23T21:57:27.288Z","0.23.0-canary.fd9da483.0":"2021-07-26T21:25:37.964Z","0.23.0-canary.8a4c7e06.0":"2021-07-26T22:44:43.944Z","0.23.0-canary.5b395fd1.0":"2021-07-27T22:53:50.140Z","0.23.0-canary.e5efdcc0.0":"2021-07-28T17:23:20.171Z","0.23.0-canary.ab310900.0":"2021-07-28T20:22:07.765Z","0.23.0-canary.21dc9bc5.0":"2021-07-28T20:26:52.517Z","0.23.0-canary.68c7fe5c.0":"2021-07-29T18:32:37.520Z","0.23.0-canary.aebe39e8.0":"2021-07-30T19:14:30.089Z","0.23.0-canary.ea889c69.0":"2021-08-03T18:48:27.072Z","0.23.0-canary.21918905.0":"2021-08-03T21:15:11.110Z","0.23.0-canary.193c87be.0":"2021-08-04T18:08:25.268Z","0.23.0-canary.6fc52d8b.0":"2021-08-05T18:11:35.782Z","0.23.0-canary.e2e9777d.0":"2021-08-05T22:48:12.007Z","0.23.0-canary.72ff1e68.0":"2021-08-06T20:49:33.193Z","0.23.0-canary.c527e93b.0":"2021-08-06T21:11:15.772Z","0.23.0-canary.78b1eaac.0":"2021-08-09T18:04:34.867Z","0.23.0-canary.a8a4ddc9.0":"2021-08-10T18:47:39.324Z","0.23.0-canary.99fc0632.0":"2021-08-11T22:22:20.621Z","0.23.0-canary.3f47ae57.0":"2021-08-12T18:00:45.177Z","0.23.0-canary.6b9bfc32.0":"2021-08-12T18:24:56.727Z","0.23.0-canary.c89ecc63.0":"2021-08-16T17:17:42.488Z","0.23.0-canary.59de86bd.0":"2021-08-18T01:39:09.294Z","0.23.0-canary.dcda879b.0":"2021-08-18T22:24:01.856Z","0.23.0-canary.dbb8b366.0":"2021-08-19T23:01:04.468Z","0.23.0-canary.c6e3060c.0":"2021-08-19T23:02:53.930Z","0.23.0-canary.03120b7d.0":"2021-08-20T00:28:05.079Z","0.23.0-canary.d75a5f74.0":"2021-08-20T07:57:23.629Z","0.23.0-canary.3d79ffe7.0":"2021-08-20T17:22:13.053Z","0.23.0-canary.02213ebe.0":"2021-08-20T17:27:00.080Z","0.23.0-canary.90a999b9.0":"2021-08-20T18:43:22.546Z","0.23.0-canary.6db58716.0":"2021-08-23T09:08:48.800Z","0.23.0-canary.9fb5bc35.0":"2021-08-23T22:51:08.279Z","0.23.0-canary.ddaa5d8e.0":"2021-08-24T18:50:36.751Z","0.23.0-canary.756208fb.0":"2021-08-25T19:51:31.936Z","0.23.0-canary.9576dcd9.0":"2021-08-25T21:44:41.838Z","0.23.0-canary.7531cf97.0":"2021-08-26T17:26:56.930Z","0.23.0-canary.3bab26b4.0":"2021-08-26T21:45:36.820Z","0.23.0-canary.fab48bee.0":"2021-08-26T22:08:32.910Z","0.23.0-canary.dec18df7.0":"2021-08-30T08:29:47.559Z","0.23.0-canary.61fe5b17.0":"2021-08-30T19:29:30.092Z","0.23.0-canary.a8c31f54.0":"2021-08-30T20:32:19.243Z","0.23.0-canary.a096dba8.0":"2021-08-31T22:19:43.698Z","0.23.0-canary.7ec04d47.0":"2021-09-02T23:26:12.231Z","0.23.0-canary.d00b098d.0":"2021-09-03T21:27:26.198Z","0.23.0-canary.f29b3352.0":"2021-09-07T18:16:57.181Z","0.23.0-canary.4962a163.0":"2021-09-07T23:54:09.854Z","0.23.0-canary.33102bf4.0":"2021-09-08T00:14:21.612Z","0.23.0-canary.76c68381.0":"2021-09-08T20:14:30.695Z","0.23.0-canary.17d51f76.0":"2021-09-08T23:27:04.153Z","0.23.0-canary.3fae6c2d.0":"2021-09-10T18:33:42.682Z","0.23.0-canary.f1958c4b.0":"2021-09-13T19:21:28.667Z","0.23.0-canary.78abbd59.0":"2021-09-13T21:27:05.596Z","0.23.0":"2021-09-13T21:36:04.309Z","0.24.0-canary.9830d665.0":"2021-09-13T21:37:50.528Z","0.24.0-canary.20e2081c.0":"2021-09-13T23:32:56.673Z","0.24.0-canary.583613a9.0":"2021-09-14T16:56:00.654Z","0.24.0-canary.0e1bd56f.0":"2021-09-14T17:33:04.089Z","0.24.0-canary.7bb1818e.0":"2021-09-15T00:36:38.416Z","0.24.0-canary.b5e665a9.0":"2021-09-15T18:13:56.453Z","0.24.0-canary.ab1e177c.0":"2021-09-15T18:45:40.422Z","0.24.0-canary.8dff8894.0":"2021-09-15T19:09:19.489Z","0.24.0-canary.9cd7e927.0":"2021-09-15T20:32:58.736Z","0.24.0-canary.a7132082.0":"2021-09-15T21:46:28.962Z","0.24.0-canary.cd9110cd.0":"2021-09-16T17:46:20.231Z","0.24.0-canary.1e5a9883.0":"2021-09-17T20:39:36.338Z","0.24.0-canary.32c830ee.0":"2021-09-17T23:09:15.618Z","0.24.0-canary.1de87bb7.0":"2021-09-18T18:52:37.810Z","0.24.0-canary.f2ea80c4.0":"2021-09-20T17:55:23.216Z","0.24.0-canary.569d739f.0":"2021-09-20T21:24:23.297Z","0.24.0-canary.5a434a50.0":"2021-09-21T02:01:22.558Z","0.26.0-canary.b1c1ab52.0":"2021-09-21T03:12:41.727Z","0.25.1":"2021-09-21T03:12:54.613Z","0.26.0-canary.ae060177.0":"2021-09-21T14:38:37.476Z","0.26.0-canary.b6fe2a12.0":"2021-09-22T20:16:47.130Z","0.26.0-canary.07e91417.0":"2021-09-22T21:06:19.039Z","0.26.0-canary.e2203ffa.0":"2021-09-23T18:28:09.288Z","0.26.0-canary.4abe237e.0":"2021-09-24T17:31:38.554Z","0.26.0-canary.6278ee5d.0":"2021-09-27T18:31:51.810Z","0.26.0-canary.3a5d5f34.0":"2021-09-27T22:42:00.897Z","0.26.0-canary.143ed3c8.0":"2021-09-29T01:51:20.972Z","0.26.0-canary.e5923d68.0":"2021-09-30T00:06:22.758Z","0.26.0-canary.d8ed5109.0":"2021-09-30T23:34:23.505Z","0.26.0-canary.0efb9c2c.0":"2021-10-02T02:08:47.163Z","0.26.0-canary.1c9adcb3.0":"2021-10-04T17:34:05.715Z","0.26.0-canary.dfc00d60.0":"2021-10-09T00:57:48.898Z","0.26.0-canary.c3aa844c.0":"2021-10-11T23:14:50.379Z","0.25.2":"2021-10-11T23:18:44.908Z","0.26.0-canary.406d6fe1.0":"2021-10-13T20:59:56.935Z","0.26.0-canary.ca0a674f.0":"2021-10-18T21:37:28.338Z","0.26.0-canary.eefcf660.0":"2021-10-20T21:24:07.186Z","0.26.0-canary.d21acc8f.0":"2021-10-20T22:32:59.232Z","0.25.3":"2021-10-21T17:55:56.079Z","0.26.0-canary.60449b7b.0":"2021-10-21T18:18:00.908Z","0.26.0-canary.0d8084ed.0":"2021-10-28T17:45:25.999Z","0.26.0-canary.232327ee.0":"2021-11-01T20:16:17.939Z","0.26.0-canary.0a492ae8.0":"2021-11-02T10:01:06.534Z","0.26.0-canary.0aa18745.0":"2021-11-02T18:08:23.038Z","0.26.0-canary.f3e28323.0":"2021-11-02T19:00:04.902Z","0.26.0-canary.27e05c5d.0":"2021-11-03T18:45:30.651Z","0.26.0-canary.b9e44af7.0":"2021-11-03T19:04:34.875Z","0.26.0-canary.448f6cb9.0":"2021-11-04T18:08:26.234Z","0.26.0-canary.8067ce28.0":"2021-11-04T22:22:57.642Z","0.26.0-canary.345c2bb9.0":"2021-12-02T17:10:56.131Z","0.26.0-canary.0547aeeb.0":"2021-12-06T16:36:59.838Z","0.26.0-canary.3b2452cc.0":"2021-12-09T00:06:26.751Z","0.26.0-canary.cf7ba5a9.0":"2021-12-10T19:07:42.188Z","0.26.0-canary.e1bcf14e.0":"2021-12-28T20:46:19.994Z","0.26.0-canary.b9d35b69.0":"2022-01-05T18:27:57.720Z","0.26.0-canary.2afff08e.0":"2022-01-06T22:23:39.155Z","0.26.0-canary.893fc857.0":"2022-01-07T18:54:39.495Z","0.26.0-canary.69ba13b7.0":"2022-01-19T22:24:34.788Z","0.26.0-canary.0af8ade5.0":"2022-02-07T22:05:54.194Z","0.26.0":"2022-05-03T17:30:46.357Z","0.26.1":"2022-05-09T20:32:05.651Z","0.27.0":"2022-08-12T19:12:22.122Z"},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"aomarks@gmail.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"brian.t.vann@gmail.com","name":"taylorv"},{"email":"hi@yef.im","name":"yefim"}],"description":"Material Design menu web component","license":"Apache-2.0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nMenus display a list of choices on temporary surfaces.\n\n\n\n[Material Design Guidelines: menus](https://material.io/design/components/menus.html)\n\n[Demo](https://material-components.github.io/material-web/demos/menu/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-menu\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\nNote, `mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso its main slot has the same interface as the main slot of a `mwc-list`.\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n\n```\n\n### Activatable\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Multi-selectable (activatable)\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n### Absolute\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Fixed\n\n\n\n```html\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n\n```\n\n### Selection Groups\n\nAdding a `group` to your `mwc-list-item`s will associate them with other\n`[mwc-list-item]`s in the same group and make selection function similarly to\na radio group.\n\n\n\n```html\n\n
    \n \n\n \n \n check\n Item 0\n \n \n check\n Item 1\n \n \n check\n Item 2\n \n
  • \n \n check\n Item 3\n \n \n check\n Item 4\n \n     \n
    \n```\n\n### Styled\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nand all CSS custom properties exposed by `mwc-list` apply here as well.\n\n\n\n```html\n\n
    \n \n \n Item 0\n Item 1\n Item 2\n Item 3\n \n
    \n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| _default_ |\tContent to display in the menus internal `` element.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list),\nso the default slot has the same interface as the default slot of `mwc-list`.\n\n### Properties/Attributes\n\nName | Type | Default | Description\n--------------------- | --------------------------------- | ------------- | -----------\n`open` | `boolean` | `false` | Whether the menu should open and display.\n`anchor` | `HTMLElement\\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.\n`corner` | `Corner`* | `\"TOP_START\"` | Corner of the anchor from which the menu should position itself.\n`menuCorner` | `MenuCorner`\\*\\* | `\"START\"` | Horizontal corner of the menu from which the menu should position itself. **NOTE:** Only horizontal corners are supported.\n`quick` | `boolean` | `false` | Whether to skip the opening animation.\n`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.\n`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.\n`x` | `number\\|null` | `null` | Sets horizontal position when `absolute`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.\n`y` | `number\\|null` | `null` | Sets vertical position when `absolute`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.\n`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.\n`defaultFocus` | `DefaultFocusState`\\*\\*\\* | `\"LIST_ROOT\"` | Item to focus upon menu open.\n`fullwidth` | `boolean` | `false` | Sets surface width to 100%.\n`stayOpenOnBodyClick` | `boolean` | `false` | Prevents the menu from closing when clicking outside the menu.\n`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `wrapFocus` property.\n`innerAriaLabel` | `string\\|null` | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerAriaLabel` property.\n`innerRole` | `\"menu\"\\|\"listbox\"` | `\"menu\"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `innerRole` property.\n`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `multi` property.\n`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `activatable` property.\n`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `items` property.\n`index` | `MWCListIndex` (readonly)\\*\\*\\*\\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `index` property.\n`selected` | `SelectedType` (readonly)\\*\\*\\*\\*\\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-1) `selected` property.\n\n\\* `Corner` is equivalent to type\n`\"TOP_LEFT\"|\"TOP_RIGHT\"|\"BOTTOM_LEFT\"|\"BOTTOM_RIGHT\"|\"TOP_START\"|\"TOP_END\" |\"BOTTOM_START\"|\"BOTTOM_END\"`\n\n\\*\\* `Corner` is equivalent to type `\"START\"|\"END\"`\n\n\\*\\*\\* `DefaultFocusState` is equivalent to type\n`\"NONE\"|\"LIST_ROOT\"|\"FIRST_ITEM\"|\"LAST_ITEM\"`\n\n\\*\\*\\*\\* `MWCListIndex` is equivalent to type `number|Set`.\n\n\\*\\*\\*\\*\\* `SelectedType` is equivaalent to type `ListItemBase|ListItemBase[]|null`.\n`ListItemBase` is the base class of `mwc-list-item` of which both\n`mwc-check-list-item` and `mwc-radio-list-item` also inherit from.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `show() => void` | Sets `open` to true.\n| `close() => void` | Sets `open` to false.\n| `select(index: MWCMenuIndex) => void` | Selects the elements at the given index / indices.\n| `getFocusedItemIndex() => number` | Returns the index of the currently-focused item. `-1` if none are focused.\n| `focusItemAtIndex(index) => void` | Focuses the item at the given index and manages tabindex on all other items.\n| `layout(updateItems = true) => void` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item.\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------------ | ------------------ | -----------\n| `opened` | `mwc-menu-surface` | none | Fired when opened.\n| `closing` | `mwc-menu-surface` | none | Fired when closing but animation may not have completed yet. Use for time-sensitive logic that must be run immediately upon close.\n| `closed` | `mwc-menu-surface` | none | Fired when closed.\n| `action` | `mwc-list` | `ActionDetail`* | Fired when a selection has been made via click or keyboard aciton.\n| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. `index` is the selected index (will be of type `Set` if multi and `number` if single), and `diff` (of type `IndexDiff`**) represents the diff of added and removed indices from previous selection.\n\n\\* See\n[`mwc-list`'s Events section](https://github.com/material-components/material-web/tree/master/packages/list#mwc-list-2) for more details.\n\n### CSS Custom Properties\n\n`mwc-menu` inherits from `mwc-list`, so all custom properties from `mwc-list`\npropagate through `mwc-menu`.\n\n| Name | Default | Description\n| ------------------------ | ------- |------------\n| `--mdc-menu-item-height` | `48px` | Height of single-line list-items in the menu.\n| `--mdc-menu-min-width` | `112px` | Menu min-width.\n| `--mdc-menu-max-width` | `calc(100vw - 32px)` | Menu max-width.\n| `--mdc-menu-max-height` | `calc(100vh - 32px)` | Menu max-height.\n| `--mdc-menu-z-index` | `8` | Z-index of the popup menu surface.\n\n`mwc-menu` internally uses\n[`mwc-list`](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties),\nsee the\n[styling documentation](https://github.com/material-components/material-web/tree/master/packages/list#css-custom-properties)\nfor further details.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-surface` | Color of the menu surface.\n| `--mdc-shape-medium` | Border radius of the dropdown.\n\n## Additional references\n\n- [MDC Web menus](https://material.io/develop/web/components/menus/)\n","readmeFilename":"README.md","keywords":["material design","web components","menu"],"homepage":"https://github.com/material-components/material-web#readme","repository":{"type":"git","url":"git+https://github.com/material-components/material-web.git","directory":"packages/menu"},"bugs":{"url":"https://github.com/material-components/material-web/issues"}}